fixed margin causing app to scroll when it shouldn't

src/app/Header.tsx

@@ -11,11 +11,12 @@ import SideNavigator from "navigation/SideNavigator";
 import { useState } from "react";
 import BottomNavigator from "navigation/BottomNavigator";
 
-const useStyles = makeStyles((theme: Theme) => ({
+const useStyles = makeStyles((theme: Theme) => {
+  return ({
     appBar: {
 			zIndex: theme.zIndex.drawer + 1,
 			backgroundImage: "none", // This prevents de-saturation of header in dark mode
-        backgroundColor: "#272727"
+			backgroundColor: theme.palette.mode === "light" ? "#3b3b3b" : "#272727"
 		},
 		toolbar: {
 			marginLeft: theme.spacing(0.5),
@@ -74,8 +75,9 @@ const useStyles = makeStyles((theme: Theme) => ({
 				marginLeft: theme.spacing(3),
 				marginRight: theme.spacing(2)
 			}
-    },
+		}
-}));
+  })
+});
 
 export default function Header() {
 

src/app/UserWrapper.tsx

@@ -22,16 +22,16 @@ const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState =>
 
 const useStyles = makeStyles((theme: Theme) => ({
   appContent: {
-    marginTop: 56,
+    paddingTop: 56,
-    marginBottom: 56,
+    paddingBottom: 56,
-    marginLeft: "0px",
+    paddingLeft: "0px",
     [theme.breakpoints.up("sm")]: {
-      marginTop: 64,
+      paddingTop: 64,
-      marginBottom: 0
+      paddingBottom: 0,
     },
     [theme.breakpoints.up("md")]: {
-      marginLeft: theme.spacing(9)
+      paddingLeft: theme.spacing(9)
-    }
+    },
   },
   container: {
     backgroundColor: theme.palette.background.default,

src/navigation/Router.tsx

@@ -329,10 +329,6 @@ export default function Router() {
 
           <Route path="/logout" element={<Logout />} />
           <Route path="grainbags/:bagID" element={<GrainBag />} />
-  {/* 
-          <ErrorBoundary FallbackComponent={ErrorFallback}>
-            <Route path="*" element={<RelativeRoutes/>} />
-          </ErrorBoundary> */}
 
           <Route path="*" element={<RelativeRoutes/>} />