From 2fc25431bdc89caa0b3907d0e468b70e75bc0f39 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Fri, 7 Mar 2025 14:03:45 -0600
Subject: [PATCH 1/2] added a way to do cell styling in the responsive tables

---
 src/common/ResponsiveTable.tsx | 2 +-
 src/pages/DeviceComponent.tsx  | 8 ++++++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/common/ResponsiveTable.tsx b/src/common/ResponsiveTable.tsx
index 0a9fd04..49b5fbd 100644
--- a/src/common/ResponsiveTable.tsx
+++ b/src/common/ResponsiveTable.tsx
@@ -450,7 +450,7 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
                       columns.map((column, j) => {
                         if (filterList.includes(column.title)) return null
                         if (column.render) return (
-                          <TableCell key={"row-"+index+"cell-"+j} sx={{ padding: 0}} >
+                          <TableCell key={"row-"+index+"cell-"+j} sx={column.cellStyle ? column.cellStyle : {padding: 0}}>
                             {column.render(row)}
                           </TableCell>
                         )
diff --git a/src/pages/DeviceComponent.tsx b/src/pages/DeviceComponent.tsx
index 47dd921..70015e1 100644
--- a/src/pages/DeviceComponent.tsx
+++ b/src/pages/DeviceComponent.tsx
@@ -1,4 +1,4 @@
-import { Box, Grid2 as Grid, Skeleton, Theme, Tooltip } from "@mui/material";
+import { Box, Grid2 as Grid, Skeleton, Theme, Tooltip, Typography } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import { NextMeasurementChip } from "common/NextMeasurementChip";
 import ResponsiveTable, { Column } from "common/ResponsiveTable";
@@ -465,16 +465,20 @@ export default function DeviceComponent() {
     return [
       {
         title: "Timestamp",
+        cellStyle: {width: "50%"},
         render: row => {
           return (
             <Tooltip title={moment(row.timestamp).calendar()}>
-              <span>{moment(row.timestamp).fromNow()}</span>
+              <Box>
+                <Typography>{moment(row.timestamp).fromNow()}</Typography>
+              </Box>
             </Tooltip>
           )
         }
       },
       {
         title: "Measurement",
+        cellStyle: {width: "50%"},
         render: row => {
           return (
             <UnitMeasurementSummary

From 77f0f778a3ac07d6fe0f0d4c6fb2ba1b1ac9d9d3 Mon Sep 17 00:00:00 2001
From: csawatzky <chris@adaptiveagriculture.ca>
Date: Fri, 7 Mar 2025 15:02:08 -0600
Subject: [PATCH 2/2] adjusting the ref type for the snackbar provider

---
 src/providers/Snackbar.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/providers/Snackbar.tsx b/src/providers/Snackbar.tsx
index 56e539d..02b35b8 100644
--- a/src/providers/Snackbar.tsx
+++ b/src/providers/Snackbar.tsx
@@ -1,7 +1,6 @@
 import { Button, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import {
-  ProviderContext as NotistackProviderContext,
   SnackbarAction,
   SnackbarProvider as NotistackSnackbarProvider,
   useSnackbar as useNotistackSnackbar
@@ -95,15 +94,17 @@ function SnackbarHelper(props: PropsWithChildren<Props>) {
 export default function SnackbarProvider(props: PropsWithChildren<Props>) {
   const { children } = props;
   const classes = useStyles();
-  const notistackRef = React.createRef<NotistackProviderContext>();
+  const providerRef = React.createRef<NotistackSnackbarProvider>();
 
   const onClickDismiss = (key: React.ReactText) => () => {
-    if (notistackRef && notistackRef.current) notistackRef.current.closeSnackbar(key);
+    if (providerRef && providerRef.current) {
+      providerRef.current.closeSnackbar(key);
+    }
   };
 
   return (
     <NotistackSnackbarProvider
-      // ref={notistackRef}
+      ref={providerRef}
       maxSnack={1}
       anchorOrigin={{
         vertical: "bottom",