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

@@ -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>

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}

src/index.scss

@@ -6,3 +6,7 @@ $body-bg: #0088ce;
 
 // Import Bootstrap and its default variables
 @import '~bootstrap/scss/bootstrap';
+
+.Terminal {
+    height: 15vh;
+}