From caff4ce6fbbd516a69b8560ad6d7fa4f8d4e12b6 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 13 Mar 2026 15:23:07 -0600
Subject: [PATCH] fixed miscoloring of the data section of the table

---
 src/common/ResponsiveTable.tsx | 81 ++++++++++++++++++----------------
 1 file changed, 43 insertions(+), 38 deletions(-)

diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx
index b229475..c5d2c82 100644
--- a/src/common/ResponsiveTable.tsx
+++ b/src/common/ResponsiveTable.tsx
@@ -1,11 +1,11 @@
 import { Box, Button, Card, Checkbox, CircularProgress, Collapse, darken, Divider, Grid2, IconButton, InputAdornment, ListItemButton, ListItemIcon, ListItemText, Menu, MenuItem, Paper, SxProps, Table, TableBody, TableCell, TableContainer, TableHead, TablePagination, TableRow, TextField, Theme, Typography } from "@mui/material";
+import { alpha } from "@mui/system/colorManipulator";
 import { makeStyles } from "@mui/styles";
 import { ArrowDownward, ArrowUpward, ChevronRight, Close, Search, ViewColumn } from "@mui/icons-material"
 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()
@@ -58,10 +58,14 @@ const useStyles = makeStyles((theme: Theme) => {
     },
     stickyHeader: {
       position: "sticky",
-      backgroundColor: getThemeType() === "light" ? "rgb(245, 245, 245)" : "rgb(40, 40, 40)",
+      backgroundColor: theme.palette.background.paper,
+      // Match Paper's elevation overlay so header matches search bar area
+      backgroundImage: theme.palette.mode === "dark"
+        ? `linear-gradient(${alpha("#fff", 0.05)}, ${alpha("#fff", 0.05)})`
+        : undefined,
       top: 0,
       zIndex: 300 //giving a really high z-index to make sure nothing is in front of it
-    }
+    },
   })},
 );
 
@@ -549,44 +553,45 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
 
   return (
     <Box className={classes.tableContainer} component={Paper}>
+      {(title || setSearchText) && (
+        <Box>
+          <Grid2 container justifyContent="space-between" alignItems="center" sx={{ padding: 1 }}>
+            <Grid2>
+              <Box sx={{ marginTop: -1 }}>
+                {renderTitle()}
+                {renderSubtitle()}
+              </Box>
+            </Grid2>
+            <Grid2 size={{ xs: "grow" }} sx={{ minWidth: 0, display: "flex", justifyContent: "flex-end" }}>
+              <Grid2 container alignItems="center" spacing={1} wrap="nowrap">
+                <Grid2>
+                  {actions && actions}
+                </Grid2>
+                <Grid2>
+                  {endTitleElement}
+                </Grid2>
+                <Grid2 sx={{ minWidth: 200, maxWidth: 320 }}>
+                  {setSearchText && (
+                    <Box className={classes.searchContainer} sx={{ width: "100%" }}>
+                      {searchBar()}
+                    </Box>
+                  )}
+                </Grid2>
+                <Grid2>
+                  { columns && !hideKeys &&
+                    <IconButton onClick={openColumnMenu} >
+                      <ViewColumn />
+                    </IconButton>
+                  }
+                </Grid2>
+              </Grid2>
+            </Grid2>
+          </Grid2>
+        </Box>
+      )}
       <TableContainer sx={{ overflowX: "auto" }}>
       <Table>
         <TableHead className={stickyHeader ? classes.stickyHeader : undefined}>
-          <TableRow sx={ !title && !setSearchText ? { display: "none" } : undefined}>
-            <TableCell colSpan={10000} sx={{ border: "none" }}>
-              <Grid2 container justifyContent="space-between">
-                <Grid2>
-                  <Box sx={{ marginTop: -1 }}>
-                    {renderTitle()}
-                    {renderSubtitle()}
-                  </Box>
-                </Grid2>
-                <Grid2>
-                  <Grid2 container alignItems={"center"} spacing={1}>
-                    <Grid2>
-                      {actions && actions}
-                    </Grid2>
-                    <Grid2>
-                      {endTitleElement}
-                    </Grid2>
-                    <Grid2>
-                      {setSearchText &&<Box className={classes.searchContainer}>
-                        {searchBar()}
-                      </Box>}
-                    </Grid2>
-                    <Grid2>
-                      { columns && !hideKeys &&
-                        <IconButton onClick={openColumnMenu} >
-                          <ViewColumn />
-                        </IconButton>
-                      }
-                    </Grid2>
-                  </Grid2>
-                </Grid2>
-              </Grid2>
-            </TableCell>
-          </TableRow>
-        
           {customElement && 
             <TableRow>
               <TableCell colSpan={10000} sx={{ border: "none" }}>