From aa334c2d82626ddcda368f985082552fede2b0b8 Mon Sep 17 00:00:00 2001
From: Laurens Valk <laurens@pybricks.com>
Date: Sat, 30 May 2020 20:10:04 +0200
Subject: [PATCH] app: drop nested container

This achives the responsive editor height without a nested container.
---
 src/components/App.tsx | 51 +++++++++++++++++++-----------------------
 src/index.scss         |  6 +----
 2 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index 8bc51f1c..0af4585f 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -12,34 +12,29 @@ import Toolbar from './Toolbar';
 function App(): JSX.Element {
     return (
         <div>
-            <Container fluid className="vh-100 d-flex flex-column">
-                <Row>
-                    <Col xs={12} md={8} className="outer-container-col">
-                        <Container
-                            fluid
-                            className="vh-100 d-flex flex-column inner-container-col"
-                        >
-                            <Row>
-                                <Col>
-                                    <Toolbar />
-                                </Col>
-                            </Row>
-                            <Row className="h-100">
-                                <Col>
-                                    <Editor />
-                                </Col>
-                            </Row>
-                            <Row>
-                                <Col className="terminal py-2">
-                                    <Terminal />
-                                </Col>
-                            </Row>
-                            <Row className="mt-2">
-                                <Col>
-                                    <StatusBar />
-                                </Col>
-                            </Row>
-                        </Container>
+            <Container fluid>
+                <Row className="vh-100">
+                    <Col className="d-flex flex-column container-col">
+                        <Row>
+                            <Col>
+                                <Toolbar />
+                            </Col>
+                        </Row>
+                        <Row className="row flex-grow-1">
+                            <Col>
+                                <Editor />
+                            </Col>
+                        </Row>
+                        <Row>
+                            <Col className="terminal py-2">
+                                <Terminal />
+                            </Col>
+                        </Row>
+                        <Row className="mt-2">
+                            <Col>
+                                <StatusBar />
+                            </Col>
+                        </Row>
                     </Col>
                     <Col xs={1} md={4} className="embed-responsive">
                         <iframe src="https://docs.pybricks.com" title="docs"></iframe>
diff --git a/src/index.scss b/src/index.scss
index 8b317f99..44d07b25 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -11,11 +11,7 @@ $body-bg: #e8e8e8;
     height: 15vh;
 }
 
-.outer-container-col {
-    padding: 0px;
-}
-
-.inner-container-col {
+.container-col {
     padding: 0px;
     padding-right: 8px;
 }