From 48f3c03ebc1bb2b01c355fbfccac031261d2e1fb Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Mon, 9 Jun 2025 14:12:42 -0600
Subject: [PATCH] removed the default padding from page container, and changed
 the prop from padding to spacing, this will add left and right padding and a
 top margin, also disable the page wide scroll bar in app.css

---
 src/app/App.css                   | 1 +
 src/common/ResponsiveTable.tsx    | 2 ++
 src/pages/AviationMap.tsx         | 2 +-
 src/pages/Bins.tsx                | 2 +-
 src/pages/ConstructionSiteMap.tsx | 2 +-
 src/pages/Devices.tsx             | 2 +-
 src/pages/FieldMap.tsx            | 2 +-
 src/pages/PageContainer.tsx       | 8 +++++---
 8 files changed, 13 insertions(+), 8 deletions(-)

diff --git a/src/app/App.css b/src/app/App.css
index 3b20b88..89db113 100644
--- a/src/app/App.css
+++ b/src/app/App.css
@@ -22,6 +22,7 @@ html, body, #root {
   height: 100%;
   margin: 0;
   padding: 0;
+  overflow-y: hidden;
 }
 
 /* styles.css or a CSS module */
diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx
index cce8276..3cd01ad 100644
--- a/src/common/ResponsiveTable.tsx
+++ b/src/common/ResponsiveTable.tsx
@@ -5,6 +5,7 @@ import { useEffect, useState } from "react";
 import React from "react";
 import { useMobile } from "hooks";
 import classNames from "classnames";
+import { getThemeType } from "theme";
 
 const useStyles = makeStyles((theme: Theme) => {
   //const isMobile = useMobile()
@@ -58,6 +59,7 @@ const useStyles = makeStyles((theme: Theme) => {
     },
     stickyHeader: {
       position: "sticky",
+      backgroundColor: getThemeType() === "light" ? "rgb(245, 245, 245)" : "rgb(40, 40, 40)",
       top: 0,
       zIndex: 300 //giving a really high z-index to make sure nothing is in front of it
     }
diff --git a/src/pages/AviationMap.tsx b/src/pages/AviationMap.tsx
index 450f453..d0a3140 100644
--- a/src/pages/AviationMap.tsx
+++ b/src/pages/AviationMap.tsx
@@ -6,7 +6,7 @@ export default function AviationMap() {
   const location = useLocation();
 
   return (
-    <PageContainer padding={-1}>
+    <PageContainer>
       {location.state !== undefined &&
       location.state !== null &&
       location.state.long !== undefined &&
diff --git a/src/pages/Bins.tsx b/src/pages/Bins.tsx
index 64a40a2..8f77613 100644
--- a/src/pages/Bins.tsx
+++ b/src/pages/Bins.tsx
@@ -1477,5 +1477,5 @@ export default function Bins(props: Props) {
     );
   };
 
-  return !props.insert ? <PageContainer padding={-1}>{page()}</PageContainer> : page();
+  return !props.insert ? <PageContainer>{page()}</PageContainer> : page();
 }
diff --git a/src/pages/ConstructionSiteMap.tsx b/src/pages/ConstructionSiteMap.tsx
index 8f1b690..27eaf46 100644
--- a/src/pages/ConstructionSiteMap.tsx
+++ b/src/pages/ConstructionSiteMap.tsx
@@ -6,7 +6,7 @@ export default function ConstructionSiteMap() {
   const location = useLocation();
 
   return (
-      <PageContainer padding={-1}>
+      <PageContainer>
         {location.state !== undefined &&
         location.state !== null &&
         location.state.long !== undefined &&
diff --git a/src/pages/Devices.tsx b/src/pages/Devices.tsx
index 7571168..6e04686 100644
--- a/src/pages/Devices.tsx
+++ b/src/pages/Devices.tsx
@@ -704,7 +704,7 @@ export default function Devices() {
   }
 
   return(
-    <PageContainer padding={isMobile ? 0 : 2}>
+    <PageContainer spacing={2}>
       <Box 
         sx={{ 
           borderRadius: 1, 
diff --git a/src/pages/FieldMap.tsx b/src/pages/FieldMap.tsx
index 9f8c112..2fc42f4 100644
--- a/src/pages/FieldMap.tsx
+++ b/src/pages/FieldMap.tsx
@@ -5,7 +5,7 @@ import { useLocation } from "react-router";
 export default function FieldMap() {
   const location = useLocation();
   return (
-    <PageContainer padding={-1}>
+    <PageContainer>
       {location.state !== undefined &&
       location.state !== null &&
       location.state.long !== undefined &&
diff --git a/src/pages/PageContainer.tsx b/src/pages/PageContainer.tsx
index a8822a7..0c78ed6 100644
--- a/src/pages/PageContainer.tsx
+++ b/src/pages/PageContainer.tsx
@@ -39,7 +39,7 @@ interface Props extends PropsWithChildren{
   fullViewport?: boolean;
   isCenterCenter?: boolean;
   sx?: SxProps<Theme>;
-  padding?: number;
+  spacing?: number;
 }
 
 export const PageContainer: React.FunctionComponent<Props> = (props: Props) => {
@@ -48,7 +48,7 @@ export const PageContainer: React.FunctionComponent<Props> = (props: Props) => {
   const { children, fullViewport, isCenterCenter, sx } = props;
   // let fullViewport = false
   // let isCenterCenter = false
-  const padding = props.padding ? props.padding : isMobile ? 1 : 2;
+  const spacing = props.spacing;
   return (
     <Container
       className={classNames(
@@ -57,7 +57,9 @@ export const PageContainer: React.FunctionComponent<Props> = (props: Props) => {
       )}
       sx={{
         ...sx, // Spread existing sx
-        ...(padding !== undefined && { padding }), // Conditionally add padding
+        paddingX: spacing,
+        marginTop: spacing
+        // ...(padding !== undefined && { padding }), // Conditionally add padding
       }}
       disableGutters
       maxWidth={false}