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'}}>
-          <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>
     );
   }