Fix issue causing status bar to block app controls

Implement navbar-height scss var

web/src/App.jsx

@@ -224,7 +224,7 @@ const App = ({ selectedPage }) => {
     return (
         <div className="app">
             <DisconnectedIcon />
-            <div style={{ paddingBottom: "56px" }}>
+            <div className="app-body">
                 <Page selectedPage={selectedPage} />
             </div>
             <MenuBar pageNumber={selectedPage} />

web/src/App.scss

@@ -20,3 +20,7 @@
   height: 100vh;
   background-color: green;
 }
+
+.app-body {
+  padding-bottom: general.$navbar-height;
+}

web/src/components/MenuBar/MenuBar.scss

@@ -5,5 +5,6 @@
   z-index: 1; // The Marquees on player cards appeared above the MenuBar otherwise, the MenuBar needs to be on top of everything always
   bottom: 0;
   width: 100vw;
+  height: general.$navbar-height;
   @include general.low-shadow-up;
 }

web/src/components/StatusBars/StatusBar.jsx

@@ -15,6 +15,7 @@ export default function StatusBar(props) {
 
     return(
         <Snackbar
+            className="snackbar"
             autoHideDuration={3000}
             anchorOrigin={{vertical: "bottom", horizontal: "left"}}
             open={open}

web/src/components/StatusBars/StatusBars.scss

@@ -30,3 +30,7 @@
   --right: translate(5px, 0px);
   animation: errorShake 0.5s 1; // Only animate once, reapplying the class will reapply the animation
 }
+
+.snackbar {
+  bottom: calc(general.$navbar-height + 4px); // Used to keep the snackbar above the navbar at the bottom as to not block controls on mobile
+}

web/src/general.scss

@@ -19,6 +19,9 @@ $select-color-gray: #bdbdbd; // for preset used_last
 $mute-color: #dc3545;
 
 $page-header-height: 3rem;
+// Used to ensure that fixed-positioned components don't appear on top of the navbar
+// This number is the natural height of the navbar when an explicit height is not provided, and was not set to 56px arbitrarily
+$navbar-height: 56px;
 
 // fonts
 @font-face {