Fix sizing

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;
+}

src/App.js

@@ -680,27 +680,33 @@ class App extends Component {
         {upgradeDisplay}
         {downloadDisplay}
         {configDisplay}
-        <Box dxStyle={{height: '28px'}}>
+        <div styleName='Container'>
-          <Grid>
+          <div styleName='Header'>
-            <Text col={0}
+            <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'}/>
-                  rowSpan={'remain'}
+              </Grid>
-                  text={'Repertory UI v' + this.props.version}
+            </Box>
-                  textAlign={'center'}
+          </div>
-                  type={'Heading1'}/>
+          <div styleName='Content'>
-            <UpgradeIcon
+            <Box dxStyle={{padding: '8px'}}>
-              available={this.state.UpgradeAvailable}
+              {mainContent}
-              clicked={()=>this.setState({UpgradeDismissed: false})}
+            </Box>
-              col={dimensions => dimensions.columns - 7}
+          </div>
-              colSpan={6}
+        </div>
-              row={0}
-              rowSpan={'remain'}/>
-          </Grid>
-        </Box>
-        <Box dxStyle={{padding: '8px', marginTop: '10px', height: '238px'}}>
-          {mainContent}
-        </Box>
       </div>
     );
   }