From ffa060cee8e0acc88e121628bfd0841059127073 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Tue, 22 Apr 2025 12:59:10 -0600
Subject: [PATCH] fixed margin causing app to scroll when it shouldn't

---
 src/app/Header.tsx        | 130 +++++++++++++++++++-------------------
 src/app/UserWrapper.tsx   |  14 ++--
 src/navigation/Router.tsx |   4 --
 3 files changed, 73 insertions(+), 75 deletions(-)

diff --git a/src/app/Header.tsx b/src/app/Header.tsx
index e75048a..4bb8e1f 100644
--- a/src/app/Header.tsx
+++ b/src/app/Header.tsx
@@ -11,71 +11,73 @@ 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"
-    },
-    toolbar: {
-        marginLeft: theme.spacing(0.5),
-        [theme.breakpoints.up("md")]: {
-            marginLeft: theme.spacing(1.5)
-        }
-    },
-    buttonContainer: {
-        marginRight: theme.spacing(0.5),
-        [theme.breakpoints.up("md")]: {
-            marginRight: theme.spacing(1.5)
-        },
-        color: getSignatureAccentColour() + " !important"
-    },
-    button: {
-        color: getSignatureAccentColour() + " !important"
-    },
-    hide: {
-        display: "none"
-    },
-    logoContainer: {
-        display: "flex",
-        alignItems: "center",
-        height: "56px",
-        justifyContent: "flex-start",
-        [theme.breakpoints.up("md")]: {
-            height: "64px"
-        }
-    },
-    logoLink: {
-        display: "flex",
-        justifyContent: "center",
-        alignItems: "center",
-        borderRadius: "5px",
-        backgroundColor: hasTransparentLogoBG()
-          ? ""
-          : theme.palette.mode === "light"
-          ? "#fff"
-          : "#0000"
-    },
-    HeaderLogo: {
-        objectFit: "cover",
-        height: "56px",
-        width: "auto",
-        padding: theme.spacing(1),
-        [theme.breakpoints.up("md")]: {
-          height: "64px"
-        }
-    },
-    appBarRight: {
-        display: "flex",
-        flexDirection: "row",
-        marginLeft: theme.spacing(2),
-        marginRight: theme.spacing(1),
-        [theme.breakpoints.up("md")]: {
-            marginLeft: theme.spacing(3),
-            marginRight: theme.spacing(2)
-        }
-    },
-}));
+			zIndex: theme.zIndex.drawer + 1,
+			backgroundImage: "none", // This prevents de-saturation of header in dark mode
+			backgroundColor: theme.palette.mode === "light" ? "#3b3b3b" : "#272727"
+		},
+		toolbar: {
+			marginLeft: theme.spacing(0.5),
+			[theme.breakpoints.up("md")]: {
+				marginLeft: theme.spacing(1.5)
+			}
+		},
+		buttonContainer: {
+			marginRight: theme.spacing(0.5),
+			[theme.breakpoints.up("md")]: {
+				marginRight: theme.spacing(1.5)
+			},
+			color: getSignatureAccentColour() + " !important"
+		},
+		button: {
+			color: getSignatureAccentColour() + " !important"
+		},
+		hide: {
+			display: "none"
+		},
+		logoContainer: {
+			display: "flex",
+			alignItems: "center",
+			height: "56px",
+			justifyContent: "flex-start",
+			[theme.breakpoints.up("md")]: {
+				height: "64px"
+			}
+		},
+		logoLink: {
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+			borderRadius: "5px",
+			backgroundColor: hasTransparentLogoBG()
+				? ""
+				: theme.palette.mode === "light"
+				? "#fff"
+				: "#0000"
+		},
+		HeaderLogo: {
+			objectFit: "cover",
+			height: "56px",
+			width: "auto",
+			padding: theme.spacing(1),
+			[theme.breakpoints.up("md")]: {
+				height: "64px"
+			}
+		},
+		appBarRight: {
+			display: "flex",
+			flexDirection: "row",
+			marginLeft: theme.spacing(2),
+			marginRight: theme.spacing(1),
+			[theme.breakpoints.up("md")]: {
+				marginLeft: theme.spacing(3),
+				marginRight: theme.spacing(2)
+			}
+		}
+  })
+});
 
 export default function Header() {
 
diff --git a/src/app/UserWrapper.tsx b/src/app/UserWrapper.tsx
index e273c58..660eb7c 100644
--- a/src/app/UserWrapper.tsx
+++ b/src/app/UserWrapper.tsx
@@ -22,16 +22,16 @@ const reducer = (state: GlobalState, action: GlobalStateAction): GlobalState =>
 
 const useStyles = makeStyles((theme: Theme) => ({
   appContent: {
-    marginTop: 56,
-    marginBottom: 56,
-    marginLeft: "0px",
+    paddingTop: 56,
+    paddingBottom: 56,
+    paddingLeft: "0px",
     [theme.breakpoints.up("sm")]: {
-      marginTop: 64,
-      marginBottom: 0
+      paddingTop: 64,
+      paddingBottom: 0,
     },
     [theme.breakpoints.up("md")]: {
-      marginLeft: theme.spacing(9)
-    }
+      paddingLeft: theme.spacing(9)
+    },
   },
   container: {
     backgroundColor: theme.palette.background.default,
diff --git a/src/navigation/Router.tsx b/src/navigation/Router.tsx
index 68adfa7..c52d5b8 100644
--- a/src/navigation/Router.tsx
+++ b/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/>} />