From b5171f2b1bd38aa5672ff1d291e46790cc6e629e Mon Sep 17 00:00:00 2001
From: "Scott E. Graves" <scott.e.graves@gmail.com>
Date: Wed, 3 Oct 2018 21:35:01 -0500
Subject: [PATCH] Fix sizing

---
 src/App.css | 21 ++++++++++++++++++++-
 src/App.js  | 46 ++++++++++++++++++++++++++--------------------
 2 files changed, 46 insertions(+), 21 deletions(-)

diff --git a/src/App.css b/src/App.css
index 35d4011..990a2b2 100644
--- a/src/App.css
+++ b/src/App.css
@@ -2,10 +2,29 @@
   display: flex;
   flex-direction: column;
   margin: 0;
-  padding: 10px;
+  padding: 8px;
   box-sizing: border-box;
   height: 100vh;
   width: 100vw;
   background-image: url('./assets/images/background.jpg');
   background-size: cover;
+}
+
+.Container {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.Header {
+  height: 28px;
+  margin-bottom: 8px;
+  box-sizing: border-box;
+}
+
+.Content {
+  flex: 1;
+  box-sizing: border-box;
 }
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 49cb4a4..b196019 100644
--- a/src/App.js
+++ b/src/App.js
@@ -680,27 +680,33 @@ class App extends Component {
         {upgradeDisplay}
         {downloadDisplay}
         {configDisplay}
-        <Box dxStyle={{height: '28px'}}>
-          <Grid>
-            <Text col={0}
+        <div styleName='Container'>
+          <div styleName='Header'>
+            <Box>
+              <Grid>
+                <Text col={0}
+                      colSpan={'remain'}
+                      row={0}
+                      rowSpan={'remain'}
+                      text={'Repertory UI v' + this.props.version}
+                      textAlign={'center'}
+                      type={'Heading1'}/>
+                <UpgradeIcon
+                  available={this.state.UpgradeAvailable}
+                  clicked={()=>this.setState({UpgradeDismissed: false})}
+                  col={dimensions => dimensions.columns - 7}
+                  colSpan={6}
                   row={0}
-                  colSpan={'remain'}
-                  rowSpan={'remain'}
-                  text={'Repertory UI v' + this.props.version}
-                  textAlign={'center'}
-                  type={'Heading1'}/>
-            <UpgradeIcon
-              available={this.state.UpgradeAvailable}
-              clicked={()=>this.setState({UpgradeDismissed: false})}
-              col={dimensions => dimensions.columns - 7}
-              colSpan={6}
-              row={0}
-              rowSpan={'remain'}/>
-          </Grid>
-        </Box>
-        <Box dxStyle={{padding: '8px', marginTop: '10px', height: '238px'}}>
-          {mainContent}
-        </Box>
+                  rowSpan={'remain'}/>
+              </Grid>
+            </Box>
+          </div>
+          <div styleName='Content'>
+            <Box dxStyle={{padding: '8px'}}>
+              {mainContent}
+            </Box>
+          </div>
+        </div>
       </div>
     );
   }