made the pulse box animation look nice by starting the pulse from behind the box that it's pulsing

src/common/PulseBox.tsx

@@ -1,57 +1,79 @@
 import { Box, BoxProps, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import classNames from "classnames";
-import { forwardRef, ReactNode } from "react";
+import { forwardRef, ReactNode, useCallback, useState } from "react";
 
 const useStyles = makeStyles((_theme: Theme) => ({
   pulseWrapper: {
     position: 'relative',
-    display: 'block', // Changed to block to respect Box margins
-    width: 'fit-content', // Shrinks to child width
-    '&::after': {
-      content: '""',
+    display: 'block',
+    width: 'fit-content',
+    isolation: 'isolate',
+    overflow: 'visible',
+  },
+  pulseRing: {
     position: 'absolute',
     top: 0,
     left: 0,
     width: '100%',
     height: '100%',
-      border: '2px solid var(--pulse-color)',
-      borderRadius: 'inherit', // Should inherit from Box
-      animation: '$pulse 1.75s infinite ease-in-out',
+    borderRadius: 'inherit',
     pointerEvents: 'none',
     boxSizing: 'border-box',
-      transition: "border-color 0.35s ease-in-out",
-    },
+    zIndex: -1,
+    animation: '$pulse 4.4s infinite ease-in-out',
   },
   '@keyframes pulse': {
-    from: {
-      transform: "scale(1)",
-      opacity: 1
-    },
-    to: {
-      transform: "scale(1.25)",
-      opacity: 0
-    }
+    /* Start behind box, then expand out and fade */
+    /* pulse, pause, pulse, pause - CONSISTENT: both pauses equal, both pulses equal */
+    /* Pulse 1 (0-42%) - gradual fade in to soften the start */
+    '0%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 1 },
+    '40%': { boxShadow: '0 0 0 14px var(--pulse-color)', opacity: 0 },
+    '42%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 0 },
+    /* Pause 1 (42-50%) */
+    '50%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 0 },
+    /* Pulse 2 (50-92%) */
+    '52%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 1 },
+    '90%': { boxShadow: '0 0 0 14px var(--pulse-color)', opacity: 0 },
+    '92%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 0 },
+    /* Pause 2 (92-100%) - same length as Pause 1, color change at iteration */
+    '100%': { boxShadow: '0 0 0 -2px var(--pulse-color)', opacity: 0 },
   },
 }));
 
 interface Props extends BoxProps {
   color: string;
+  colors?: string[];
   children: ReactNode;
   className?: string;
 }
 
 const PulseBox = forwardRef<HTMLDivElement, Props>((props, ref) => {
-  const { color, children, className, ...boxProps } = props;
+  const { color, colors: colorsProp, children, className, ...boxProps } = props;
   const classes = useStyles()
 
+  const colors = colorsProp && colorsProp.length > 0 ? colorsProp : [color];
+  const [colorIndex, setColorIndex] = useState(0);
+  const displayColor = colors[colorIndex % colors.length] ?? color;
+
+  const onAnimationIteration = useCallback(() => {
+    if (colors.length > 1) {
+      setColorIndex((i) => (i + 1) % colors.length);
+    }
+  }, [colors.length]);
+
   return (
     <Box 
       ref={ref}
       {...boxProps}
       className={classNames([classes.pulseWrapper, className])} 
-      style={{ '--pulse-color': color } as React.CSSProperties}
+      style={{ '--pulse-color': displayColor } as React.CSSProperties}
     >
+      <span
+        className={classes.pulseRing}
+        aria-hidden
+        onAnimationIteration={onAnimationIteration}
+      />
       {children}
     </Box>
   );

src/common/ResponsiveTable.tsx

@@ -16,8 +16,6 @@ const useStyles = makeStyles((theme: Theme) => {
     },
     tableContainer: {
       width: "100%",
-      maxWidth: "100%",
-      overflow: "hidden",
       minWidth: 0,
     },
     title: {
@@ -550,14 +548,8 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
     if (actualDelta > 0) {
       // Shrinking current column – give space to next column
       newWidths[index + 1] = (newWidths[index + 1] ?? 0) + actualDelta
-    } else if (actualDelta < 0) {
-      // Growing current column – take from next column only what it can give
-      const nextWidth = newWidths[index + 1] ?? 0
-      const availableFromNext = Math.max(0, nextWidth - MIN_COLUMN_WIDTH)
-      const takeFromNext = Math.min(-actualDelta, availableFromNext)
-      newWidths[index + 1] = nextWidth - takeFromNext
-      // If we couldn't take enough, the table grows (clampedWidth already applied)
     }
+    // When growing (actualDelta < 0): never shrink adjacent columns – table grows to accommodate
     setRowWidths(newWidths)
   }
 
@@ -605,7 +597,20 @@ export default function ResponsiveTable<T extends Object>(props: Props<T>) {
         </Box>
       )}
       <TableContainer sx={{ overflowX: "auto", paddingBottom: 1 }}>
-      <Table>
+      <Table
+        sx={{
+          tableLayout: "fixed",
+          width: columns && rowWidths.length > 0
+            ? (() => {
+                const colsWidth = columns.reduce(
+                  (sum, c, i) => sum + (filterList.includes(c.title) || c.hidden ? 0 : (rowWidths[i] ?? 0)),
+                  0
+                ) + (rowSelect ? 48 : 0) + (renderGutter ? 48 : 0)
+                return colsWidth > 0 ? `max(${colsWidth}px, 100%)` : "100%"
+              })()
+            : "100%",
+        }}
+      >
         <TableHead className={stickyHeader ? classes.stickyHeader : undefined}>
           {customElement && 
             <TableRow>

src/common/StatusDust.tsx

@@ -57,21 +57,6 @@ export default function StatusDust(props: Props) {
   const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
   const messages = or(device.status.sen5x?.overlays.map(overlay => overlay.message), []);
 
-  const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
-  const [, setColorIndex] = useState(0)
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setColorIndex(prevIndex => {
-        const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
-        setColor(colors[newIndex]); // Use the new index here
-        return newIndex;
-      });
-    }, 7500);
-    
-    return () => clearInterval(interval);
-  }, []);
-
   // const [currentIndex, setCurrentIndex] = useState(0);
 
   // Auto-cycle through measurements every 3 seconds
@@ -142,7 +127,7 @@ export default function StatusDust(props: Props) {
 
   return (
     <Tooltip title={tooltip()}>
-      <PulseBox color={color} className={classes.box} >
+      <PulseBox color={colors[0] ?? ""} colors={colors} className={classes.box} >
         <Grid2 container direction="column" >
           <Grid2 container direction="column" 
             className={`${classes.carouselItem} ${classes.active }`}

src/common/StatusGas.tsx

@@ -85,23 +85,8 @@ export default function StatusGas(props: Props) {
     messages = or(device.status[gasType]?.overlays?.map(overlay => overlay.message), []);
   }
 
-  const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
-  const [, setColorIndex] = useState(0)
-
   const gasTypes: ("o2" | "no2" | "co2" | "co" | "lel" | "h2s")[] = ["o2", "no2", "co2", "co", "lel", "h2s"]
 
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setColorIndex(prevIndex => {
-        const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
-        setColor(colors[newIndex]); // Use the new index here
-        return newIndex;
-      });
-    }, 7500);
-    
-    return () => clearInterval(interval);
-  }, []);
-
   const [currentIndex, setCurrentIndex] = useState(0);
 
   // Auto-cycle through measurements every 5 seconds
@@ -183,7 +168,7 @@ export default function StatusGas(props: Props) {
     }
     return (
       <Tooltip title={tooltip()}>
-        <PulseBox color={color} className={gasType === "all" ? classes.boxTall : classes.box}>
+        <PulseBox color={colors[0] ?? ""} colors={colors} className={gasType === "all" ? classes.boxTall : classes.box}>
           <Grid2 container direction="column" >
             { gasType === "all" &&
               <Typography variant="body2">

src/common/StatusPlenum.tsx

@@ -5,7 +5,6 @@ import { Device } from "models";
 import PulseBox from "./PulseBox";
 import RelativeTimestamp from "./RelativeTimestamp";
 import { or } from "utils";
-import { useEffect, useState } from "react";
 
 interface Props {
   device: Device;
@@ -33,21 +32,6 @@ export default function StatusPlenum(props: Props) {
   const colors = or(device.status.plenum?.overlays.map(overlay => overlay.color), []);
   const messages = or(device.status.plenum?.overlays.map(overlay => overlay.message), []);
 
-  const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
-  const [, setColorIndex] = useState(0)
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setColorIndex(prevIndex => {
-        const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
-        setColor(colors[newIndex]); // Use the new index here
-        return newIndex;
-      });
-    }, 5000);
-    
-    return () => clearInterval(interval);
-  }, []);
-
   const tooltip = () => {
     if (messages.length === 0) return null
     if (messages.length < 2) return (
@@ -107,7 +91,7 @@ export default function StatusPlenum(props: Props) {
 
   return (
     <Tooltip title={tooltip()}>
-      <PulseBox color={color} className={classes.box} >
+      <PulseBox color={colors[0] ?? ""} colors={colors} className={classes.box} >
         <Grid2 container direction="column" >
           <Grid2>
             <Typography variant="body2" style={{ color: orange[700]}}>

src/common/StatusSen5x.tsx

@@ -58,21 +58,6 @@ export default function StatusSen5x(props: Props) {
   const colors = or(device.status.sen5x?.overlays.map(overlay => overlay.color), []);
   const messages = or(device.status.sen5x?.overlays.map(overlay => overlay.message), []);
 
-  const [color, setColor] = useState(colors.length > 0 ? colors[0] : "");
-  const [, setColorIndex] = useState(0)
-
-  useEffect(() => {
-    const interval = setInterval(() => {
-      setColorIndex(prevIndex => {
-        const newIndex = prevIndex >= colors.length - 1 ? 0 : prevIndex + 1;
-        setColor(colors[newIndex]); // Use the new index here
-        return newIndex;
-      });
-    }, 7500);
-    
-    return () => clearInterval(interval);
-  }, []);
-
   const [currentIndex, setCurrentIndex] = useState(0);
 
   // Auto-cycle through measurements every 5 seconds
@@ -147,7 +132,7 @@ export default function StatusSen5x(props: Props) {
 
   return (
     <Tooltip title={tooltip()}>
-      <PulseBox color={color} className={classes.box} >
+      <PulseBox color={colors[0] ?? ""} colors={colors} className={classes.box} >
         <Grid2 container direction="column" >
           <Grid2 container direction="column"
             className={`${classes.carouselItem} ${