Merge branch 'sticky_header' into staging_environment

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 &&

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();
 }

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 &&

src/pages/Devices.tsx

@@ -718,7 +718,7 @@ export default function Devices() {
   )
 
   return(
-    <PageContainer padding={isMobile ? 0 : 2}>
+    <PageContainer spacing={2}>
       <Box 
         sx={{ 
           borderRadius: 1, 
@@ -749,6 +749,7 @@ export default function Devices() {
       <ResponsiveTable<Device>
         title={<SmartBreadcrumb prependPaths={getGroup() && ["groups", getGroup().id().toString()]} groupName={getGroup() && getGroup().name()} paddingBottom={1}/>}
         subtitle={subtitle}
+        stickyHeader
         rows={devices}
         renderGutter={ isMobile ? gutter : undefined }
         columns={columns}

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 &&

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}