From 2d847b9e7c23d26228570d95bbb05c811ab88605 Mon Sep 17 00:00:00 2001
From: Anthony Laibe <anthony@laibe.cc>
Date: Fri, 31 Aug 2018 10:37:30 +0100
Subject: [PATCH] Adding overflow to console

---
 embark-ui/src/components/Console.css |  4 ++++
 embark-ui/src/components/Console.js  | 10 +++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)
 create mode 100644 embark-ui/src/components/Console.css

diff --git a/embark-ui/src/components/Console.css b/embark-ui/src/components/Console.css
new file mode 100644
index 00000000..67612e94
--- /dev/null
+++ b/embark-ui/src/components/Console.css
@@ -0,0 +1,4 @@
+.console--results {
+  height: 200px;
+  overflow-y: scroll;
+}
diff --git a/embark-ui/src/components/Console.js b/embark-ui/src/components/Console.js
index 99afab3e..123905a3 100644
--- a/embark-ui/src/components/Console.js
+++ b/embark-ui/src/components/Console.js
@@ -2,6 +2,8 @@ import PropTypes from "prop-types";
 import React, {Component} from 'react';
 import {Grid, Card, Form} from 'tabler-react';
 
+require('./Console.css');
+
 const CommandResult = ({result}) => (
   <p className="text__new-line">{result}</p>
 );
@@ -28,23 +30,25 @@ class Console extends Component {
 
   render() {
     return (
-      <Grid.Row cards>
+      <Grid.Row cards className="console">
         <Grid.Col>
           <Card>
             <Card.Header>
               <Card.Title>Embark console</Card.Title>
             </Card.Header>
-            <Card.Body>
+            <Card.Body className="console--results">
               <div>
                 {this.props.commands.map((command, index) => <CommandResult key={index} result={command.result} />)}
               </div>
+            </Card.Body>
+            <Card.Footer>
               <Form onSubmit={(event) => this.handleSubmit(event)}>
                 <Form.Input value={this.state.value}
                             onChange={(event) => this.handleChange(event)}
                             name="command"
                             placeholder="Type a command (e.g help)" />
               </Form>
-            </Card.Body>
+            </Card.Footer>
           </Card>
         </Grid.Col>
       </Grid.Row>