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