From 67de6c3af947babda6541757b882879ddc4113e0 Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Thu, 28 May 2020 12:15:51 +0200
Subject: [PATCH] app: fill vertically & horizontally

Do not use a fixed height for the editor, but responsively scale to the remaining available height.

Also fill horizontally for a responsive layout. This gives us room to add left or right columns with docs or settings.
---
 src/components/App.tsx    | 13 +++++--------
 src/components/Editor.tsx |  1 +
 src/index.scss            |  4 ++++
 3 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index b873b62e..e459738a 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -11,23 +11,20 @@ import Toolbar from './Toolbar';
 
 function App(): JSX.Element {
     return (
-        <div
-            className="position-fixed"
-            style={{ width: '100%', height: 'calc(100% - 0px)' }}
-        >
-            <Container>
+        <div>
+            <Container fluid className="vh-100 d-flex flex-column">
                 <Row>
                     <Col>
                         <Toolbar />
                     </Col>
                 </Row>
-                <Row>
-                    <Col className="py-2">
+                <Row className="h-100">
+                    <Col>
                         <Editor />
                     </Col>
                 </Row>
                 <Row>
-                    <Col style={{ height: '25vh' }} className="py-2">
+                    <Col className="Terminal py-2">
                         <Terminal />
                     </Col>
                 </Row>
diff --git a/src/components/Editor.tsx b/src/components/Editor.tsx
index 65cbb87d..64980d69 100644
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@@ -21,6 +21,7 @@ class Editor extends React.Component {
                         theme="xcode"
                         fontSize="16pt"
                         width="100"
+                        height="100%"
                         focus={true}
                         placeholder="Write your program here..."
                         defaultValue={localStorage.getItem('program') || undefined}
diff --git a/src/index.scss b/src/index.scss
index b2bbd198..5162395d 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -6,3 +6,7 @@ $body-bg: #0088ce;
 
 // Import Bootstrap and its default variables
 @import '~bootstrap/scss/bootstrap';
+
+.Terminal {
+    height: 15vh;
+}