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,11 +680,13 @@ class App extends Component {
         {upgradeDisplay}
         {downloadDisplay}
         {configDisplay}
-        <Box dxStyle={{height: '28px'}}>
+        <div styleName='Container'>
+          <div styleName='Header'>
+            <Box>
               <Grid>
                 <Text col={0}
-                  row={0}
                       colSpan={'remain'}
+                      row={0}
                       rowSpan={'remain'}
                       text={'Repertory UI v' + this.props.version}
                       textAlign={'center'}
@@ -698,10 +700,14 @@ class App extends Component {
                   rowSpan={'remain'}/>
               </Grid>
             </Box>
-        <Box dxStyle={{padding: '8px', marginTop: '10px', height: '238px'}}>
+          </div>
+          <div styleName='Content'>
+            <Box dxStyle={{padding: '8px'}}>
               {mainContent}
             </Box>
           </div>
+        </div>
+      </div>
     );
   }
 }