fixed margin causing app to scroll when it shouldn't

This commit is contained in:
Carter 2025-04-22 12:59:10 -06:00
parent e56c5f0781
commit ffa060cee8
3 changed files with 73 additions and 75 deletions

View file

@ -11,71 +11,73 @@ import SideNavigator from "navigation/SideNavigator";
import { useState } from "react"; import { useState } from "react";
import BottomNavigator from "navigation/BottomNavigator"; import BottomNavigator from "navigation/BottomNavigator";
const useStyles = makeStyles((theme: Theme) => ({ const useStyles = makeStyles((theme: Theme) => {
return ({
appBar: { appBar: {
zIndex: theme.zIndex.drawer + 1, zIndex: theme.zIndex.drawer + 1,
backgroundImage: "none", // This prevents de-saturation of header in dark mode backgroundImage: "none", // This prevents de-saturation of header in dark mode
backgroundColor: "#272727" backgroundColor: theme.palette.mode === "light" ? "#3b3b3b" : "#272727"
}, },
toolbar: { toolbar: {
marginLeft: theme.spacing(0.5), marginLeft: theme.spacing(0.5),
[theme.breakpoints.up("md")]: { [theme.breakpoints.up("md")]: {
marginLeft: theme.spacing(1.5) marginLeft: theme.spacing(1.5)
} }
}, },
buttonContainer: { buttonContainer: {
marginRight: theme.spacing(0.5), marginRight: theme.spacing(0.5),
[theme.breakpoints.up("md")]: { [theme.breakpoints.up("md")]: {
marginRight: theme.spacing(1.5) marginRight: theme.spacing(1.5)
}, },
color: getSignatureAccentColour() + " !important" color: getSignatureAccentColour() + " !important"
}, },
button: { button: {
color: getSignatureAccentColour() + " !important" color: getSignatureAccentColour() + " !important"
}, },
hide: { hide: {
display: "none" display: "none"
}, },
logoContainer: { logoContainer: {
display: "flex", display: "flex",
alignItems: "center", alignItems: "center",
height: "56px", height: "56px",
justifyContent: "flex-start", justifyContent: "flex-start",
[theme.breakpoints.up("md")]: { [theme.breakpoints.up("md")]: {
height: "64px" height: "64px"
} }
}, },
logoLink: { logoLink: {
display: "flex", display: "flex",
justifyContent: "center", justifyContent: "center",
alignItems: "center", alignItems: "center",
borderRadius: "5px", borderRadius: "5px",
backgroundColor: hasTransparentLogoBG() backgroundColor: hasTransparentLogoBG()
? "" ? ""
: theme.palette.mode === "light" : theme.palette.mode === "light"
? "#fff" ? "#fff"
: "#0000" : "#0000"
}, },
HeaderLogo: { HeaderLogo: {
objectFit: "cover", objectFit: "cover",
height: "56px", height: "56px",
width: "auto", width: "auto",
padding: theme.spacing(1), padding: theme.spacing(1),
[theme.breakpoints.up("md")]: { [theme.breakpoints.up("md")]: {
height: "64px" height: "64px"
} }
}, },
appBarRight: { appBarRight: {
display: "flex", display: "flex",
flexDirection: "row", flexDirection: "row",
marginLeft: theme.spacing(2), marginLeft: theme.spacing(2),
marginRight: theme.spacing(1), marginRight: theme.spacing(1),
[theme.breakpoints.up("md")]: { [theme.breakpoints.up("md")]: {
marginLeft: theme.spacing(3), marginLeft: theme.spacing(3),
marginRight: theme.spacing(2) marginRight: theme.spacing(2)
} }
}, }
})); })
});
export default function Header() { export default function Header() {

View file

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

View file

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