From 843e3a792ef7c909c5e116cbc290eef87cf30a2d Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Mon, 16 Mar 2026 11:30:29 -0600
Subject: [PATCH] fixed some placement stuff

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

diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx
index 2a4cf1a..f55098b 100644
--- a/src/common/ResponsiveTable.tsx
+++ b/src/common/ResponsiveTable.tsx
@@ -28,13 +28,12 @@ const useStyles = makeStyles((theme: Theme) => {
       marginTop: theme.spacing(-2),
     },
     titleComp: {
-      padding: theme.spacing(1),
-      marginLeft: theme.spacing(-1)
+      padding: theme.spacing(1, 1, 0, 1.5),
     },
     subtitleComp: {
-      padding: theme.spacing(1),
-      marginTop: theme.spacing(-2),
-      marginLeft: theme.spacing(-1),
+      padding: theme.spacing(0, 1, 0.5, 1.5),
+      display: "flex",
+      alignItems: "center",
     },
     titleContainer: {
       border: "none",
@@ -42,6 +41,8 @@ const useStyles = makeStyles((theme: Theme) => {
     searchContainer: {
       border: "none",
       textAlign: "right",
+      display: "flex",
+      alignItems: "center",
     },
     mobileTitleBox: {
       margin: theme.spacing(1),
@@ -118,8 +119,9 @@ function ResizableHeaderTitle<T>(props: {
           : {}),
       }}
     >
-      <Box component="span" sx={{ whiteSpace: "nowrap" }}>
-        {column.title} {showOrderIcon(column)}
+      <Box component="span" sx={{ whiteSpace: "nowrap", display: "inline-flex", alignItems: "center" }}>
+        <Box component="span">{column.title}</Box>
+        {showOrderIcon(column)}
       </Box>
     </Grid2>
   );
@@ -491,9 +493,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     const sortKey = column.sortKey ? column.sortKey : column.title.toLowerCase()
     if (sortKey === orderBy) {
       if (order === "asc") {
-        return <ArrowDownward fontSize="small" sx={{ marginLeft: 1 }} />
+        return (
+          <Box component="span" sx={{ ml: 0.5, display: "inline-flex", alignItems: "center" }}>
+            <ArrowDownward fontSize="small" />
+          </Box>
+        )
       } else {
-        return <ArrowUpward fontSize="small" sx={{ marginLeft: 1 }} />
+        return (
+          <Box component="span" sx={{ ml: 0.5, display: "inline-flex", alignItems: "center" }}>
+            <ArrowUpward fontSize="small" />
+          </Box>
+        )
       }
     }
     return null;
@@ -553,14 +563,17 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     <Box className={classes.tableContainer} component={Paper}>
       {(title || setSearchText) && (
         <Box>
-          <Grid2 container justifyContent="space-between" alignItems="center" sx={{ padding: 1 }}>
+          <Grid2
+            container
+            justifyContent="space-between"
+            alignItems="center"
+            sx={{ px: 1.5, pt: 1, pb: 0.5 }}
+          >
             <Grid2>
-              <Box sx={{ marginTop: -1 }}>
-                {renderTitle()}
-                {renderSubtitle()}
-              </Box>
+              {renderTitle()}
+              {renderSubtitle()}
             </Grid2>
-            <Grid2 size={{ xs: "grow" }} sx={{ minWidth: 0, display: "flex", justifyContent: "flex-end" }}>
+            <Grid2 size={{ xs: "grow" }} sx={{ minWidth: 0, display: "flex", justifyContent: "flex-end", mt: -1 }}>
               <Grid2 container alignItems="center" spacing={1} wrap="nowrap">
                 <Grid2>
                   {actions && actions}