From a901c12ebe73a0682df234e498084323c1131961 Mon Sep 17 00:00:00 2001
From: Carter <carter@adaptiveagriculture.ca>
Date: Fri, 20 Mar 2026 12:22:52 -0600
Subject: [PATCH] fixed sen5x status card formatting with timestamp

---
 src/common/StatusDust.tsx  |  57 ++++++++++--------
 src/common/StatusSen5x.tsx | 116 ++++++++++++++++++++-----------------
 2 files changed, 94 insertions(+), 79 deletions(-)

diff --git a/src/common/StatusDust.tsx b/src/common/StatusDust.tsx
index 4963269..87156e4 100644
--- a/src/common/StatusDust.tsx
+++ b/src/common/StatusDust.tsx
@@ -23,7 +23,12 @@ const useStyles = makeStyles((theme: Theme) => {
       marginRight: "auto",
       margin: theme.spacing(1),
       width: theme.spacing(16),
-      height: theme.spacing(11),
+      minHeight: theme.spacing(11),
+    },
+    readingsWrapper: {
+      position: "relative",
+      width: "100%",
+      minHeight: theme.spacing(10),
     },
     carouselContainer: {
       position: 'relative',
@@ -143,33 +148,35 @@ export default function StatusDust(props: Props) {
   return (
     <Tooltip title={tooltip()}>
       <PulseBox color={color} className={classes.box} >
-        <Grid2 container direction="column" >
-          <Grid2 container direction="column" 
-            className={`${classes.carouselItem} ${classes.active }`}
-          >
-            <Grid2>
-              <Typography variant="body2" style={{ color: green[300]}}>
-                {"<1um:"} {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
-              </Typography>
-            </Grid2>
-            <Grid2>
-              <Typography variant="body2" style={{ color: green[400]}}>
-                {"<2.5um:"} {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
-              </Typography>
-            </Grid2>
-            <Grid2>
-              <Typography variant="body2" style={{ color: green[500]}}>
-                {"<4um: "}{device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
-              </Typography>
-            </Grid2>
-            <Grid2>
-              <Typography variant="body2" style={{ color: green[600]}}>
-                {"<10um: "}{device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
-              </Typography>
+        <Grid2 container direction="column" spacing={0.25}>
+          <Grid2 className={classes.readingsWrapper}>
+            <Grid2 container direction="column"
+              className={`${classes.carouselItem} ${classes.active }`}
+            >
+              <Grid2>
+                <Typography variant="body2" style={{ color: green[300]}}>
+                  {"<1um:"} {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
+                </Typography>
+              </Grid2>
+              <Grid2>
+                <Typography variant="body2" style={{ color: green[400]}}>
+                  {"<2.5um:"} {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
+                </Typography>
+              </Grid2>
+              <Grid2>
+                <Typography variant="body2" style={{ color: green[500]}}>
+                  {"<4um: "}{device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
+                </Typography>
+              </Grid2>
+              <Grid2>
+                <Typography variant="body2" style={{ color: green[600]}}>
+                  {"<10um: "}{device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
+                </Typography>
+              </Grid2>
             </Grid2>
           </Grid2>
           {showTimestamp && device.status.sen5x?.timestamp && (
-            <Grid2>
+            <Grid2 sx={{ pt: 0.25 }}>
               <RelativeTimestamp timestamp={device.status.sen5x.timestamp} />
             </Grid2>
           )}
diff --git a/src/common/StatusSen5x.tsx b/src/common/StatusSen5x.tsx
index 533fde2..5e1052a 100644
--- a/src/common/StatusSen5x.tsx
+++ b/src/common/StatusSen5x.tsx
@@ -24,7 +24,13 @@ const useStyles = makeStyles((theme: Theme) => {
       marginRight: "auto",
       margin: theme.spacing(1),
       width: theme.spacing(16),
-      height: theme.spacing(11),
+      minHeight: theme.spacing(11),
+    },
+    /** Reserves vertical space so absolute carousel slides do not overlap the timestamp below. */
+    readingsWrapper: {
+      position: "relative",
+      width: "100%",
+      minHeight: theme.spacing(10),
     },
     carouselContainer: {
       position: 'relative',
@@ -148,62 +154,64 @@ export default function StatusSen5x(props: Props) {
   return (
     <Tooltip title={tooltip()}>
       <PulseBox color={color} className={classes.box} >
-        <Grid2 container direction="column" >
-          <Grid2 container direction="column"
-            className={`${classes.carouselItem} ${
-              0 === currentIndex ? classes.active : classes.inactive
-            }`}
-          >
-            <Grid2>
-              <Typography variant="body2" style={{ color: orange[700]}}>
-                Temp: {device.status.sen5x?.temperature.toFixed(1)}°C
-              </Typography>
-            </Grid2>
-            <Grid2>
-              <Typography variant="body2" style={{ color: blue[700]}}>
-                Humidity: {device.status.sen5x?.humidity.toFixed(1)}%
-              </Typography>
-            </Grid2>
-            <Grid2>
-              <Typography variant="body2" style={{ color: blue[300]}}>
-                Voc: {device.status.sen5x?.voc.toFixed(1)}%
-              </Typography>
-            </Grid2>
-            <Grid2>
-              <Typography variant="body2" style={{ color: blue[400]}}>
-                Nox: {device.status.sen5x?.nox.toFixed(1)}%
-              </Typography>
+        <Grid2 container direction="column" spacing={0.25}>
+          <Grid2 className={classes.readingsWrapper}>
+            <Grid2 container direction="column"
+              className={`${classes.carouselItem} ${
+                0 === currentIndex ? classes.active : classes.inactive
+              }`}
+            >
+              <Grid2>
+                <Typography variant="body2" style={{ color: orange[700]}}>
+                  Temp: {device.status.sen5x?.temperature.toFixed(1)}°C
+                </Typography>
+              </Grid2>
+              <Grid2>
+                <Typography variant="body2" style={{ color: blue[700]}}>
+                  Humidity: {device.status.sen5x?.humidity.toFixed(1)}%
+                </Typography>
+              </Grid2>
+              <Grid2>
+                <Typography variant="body2" style={{ color: blue[300]}}>
+                  Voc: {device.status.sen5x?.voc.toFixed(1)}%
+                </Typography>
+              </Grid2>
+              <Grid2>
+                <Typography variant="body2" style={{ color: blue[400]}}>
+                  Nox: {device.status.sen5x?.nox.toFixed(1)}%
+                </Typography>
+              </Grid2>
             </Grid2>
+
+            {!noDust && <Grid2 container direction="column"
+              className={`${classes.carouselItem} ${
+                1 === currentIndex ? classes.active : classes.inactive
+              }`}
+            >
+              <Grid2>
+                <Typography variant="body2" style={{ color: green[300]}}>
+                  {"<1um:"} {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
+                </Typography>
+              </Grid2>
+              <Grid2>
+                <Typography variant="body2" style={{ color: green[400]}}>
+                  {"<2.5um:"} {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
+                </Typography>
+              </Grid2>
+              <Grid2>
+                <Typography variant="body2" style={{ color: green[500]}}>
+                  {"<4um: "}{device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
+                </Typography>
+              </Grid2>
+              <Grid2>
+                <Typography variant="body2" style={{ color: green[600]}}>
+                  {"<10um: "}{device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
+                </Typography>
+              </Grid2>
+            </Grid2>}
           </Grid2>
-          
-          {!noDust && <Grid2 container direction="column" 
-            className={`${classes.carouselItem} ${
-              1 === currentIndex ? classes.active : classes.inactive
-            }`}
-          >
-            <Grid2>
-              <Typography variant="body2" style={{ color: green[300]}}>
-                {"<1um:"} {device.status.sen5x?.dust1ug.toFixed(1)}ug/m3
-              </Typography>
-            </Grid2>
-            <Grid2>
-              <Typography variant="body2" style={{ color: green[400]}}>
-                {"<2.5um:"} {device.status.sen5x?.dust2ug.toFixed(1)}ug/m3
-              </Typography>
-            </Grid2>
-            <Grid2>
-              <Typography variant="body2" style={{ color: green[500]}}>
-                {"<4um: "}{device.status.sen5x?.dust4ug.toFixed(1)}ug/m3
-              </Typography>
-            </Grid2>
-            <Grid2>
-              <Typography variant="body2" style={{ color: green[600]}}>
-                {"<10um: "}{device.status.sen5x?.dust10ug.toFixed(1)}ug/m3
-              </Typography>
-            </Grid2>
-          </Grid2>}
           {showTimestamp && device.status.sen5x?.timestamp && (
-            <Grid2>
+            <Grid2 sx={{ pt: 0.25 }}>
               <RelativeTimestamp timestamp={device.status.sen5x.timestamp} />
             </Grid2>
           )}