Remove extra nesting

modern/public/index.html

@@ -13,6 +13,6 @@
     <noscript>
       You need to enable JavaScript to run this app.
     </noscript>
-    <div id="root" style="height: 100%;"></div>
+    <div id="root" class="root"></div>
   </body>
 </html>

modern/public/styles.css

@@ -12,6 +12,12 @@ canvas {
   -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 }
 
+.root {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
 .maplibregl-popup-content {
   padding: 10px !important;
 }

modern/src/App.js

@@ -53,11 +53,6 @@ import AccumulatorsPage from './settings/AccumulatorsPage';
 import CommandSendPage from './settings/CommandSendPage';
 
 const useStyles = makeStyles(() => ({
-  root: {
-    display: 'flex',
-    flexDirection: 'column',
-    height: '100%',
-  },
   page: {
     flexGrow: 1,
     overflow: 'auto',
@@ -114,7 +109,7 @@ const App = () => {
           <Route exact path="/reset-password" component={ResetPasswordPage} />
           <Route>
             {!initialized ? (<LinearProgress />) : (
-              <div className={classes.root}>
+              <>
                 <div className={classes.page}>
                   <Switch>
                     <Route exact path="/" component={MainPage} />
@@ -158,7 +153,7 @@ const App = () => {
                     <BottomMenu />
                   </div>
                 )}
-              </div>
+              </>
             )}
           </Route>
         </Switch>