Merge branch 'sticky_header' into staging_environment

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 */

src/common/ResponsiveTable.tsx

@@ -5,6 +5,7 @@ import { useEffect, useRef, 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()
@@ -56,6 +57,12 @@ const useStyles = makeStyles((theme: Theme) => {
         backgroundColor: "rgba(150, 150, 150, 0.15)",
       }
     },
+    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
+    }
   })},
 );
 
@@ -101,6 +108,7 @@ interface Props<T> {
   endTitleElement?: string | JSX.Element | (() => string | JSX.Element);
   loadMore?: () => void;
   resizeable?: boolean;
+  stickyHeader?: boolean
 }
 
 export default function ResponsiveTable<T extends Object>(props: Props<T>) {
@@ -136,6 +144,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     setOrder,
     loadMore,
     // resizeable,
+    stickyHeader
   } = props
   const classes = useStyles();
   const columns = typeof(props.columns) === "function" ? props.columns() : props.columns
@@ -486,9 +495,9 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
   }
 
   return (
-    <TableContainer className={classes.tableContainer} component={Paper}>
+    <Box className={classes.tableContainer} component={Paper}>
       <Table>
-        <TableHead>
+        <TableHead className={stickyHeader ? classes.stickyHeader : undefined}>
           <TableRow sx={ !title && !setSearchText ? { display: "none" } : undefined}>
             <TableCell colSpan={10000} sx={{ border: "none" }}>
               <Grid2 container justifyContent="space-between">
@@ -702,6 +711,6 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
             </Typography>
           </MenuItem>
       </Menu>
-    </TableContainer>
+    </Box>
   )
 }

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}