From 4a79013ef25372723854cf6e63c3e53e4b2e39bc Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 25 Nov 2025 20:32:58 +0000
Subject: [PATCH] gap

---
 client/src/components/common/HeatmapResponseTime.tsx | 10 +++++++++-
 client/src/components/status-pages/StatusPageRow.tsx |  1 +
 2 files changed, 10 insertions(+), 1 deletion(-)

diff --git a/client/src/components/common/HeatmapResponseTime.tsx b/client/src/components/common/HeatmapResponseTime.tsx
index 17d45e775..985ee13a6 100644
--- a/client/src/components/common/HeatmapResponseTime.tsx
+++ b/client/src/components/common/HeatmapResponseTime.tsx
@@ -1,22 +1,30 @@
 import Box from "@mui/material/Box";
+// Using strip + square; icons removed
 import { useTheme } from "@mui/material/styles";
 import type { ICheck } from "@/types/check";
 import { getResponseColor } from "@/utils/DataUtils";
 import { HeatmapResponseTimeTooltip } from "./HeatmapResponseTimeTooltip";
 import type { SxProps } from "@mui/material/styles";
+import type { ResponsiveStyleValue } from "@mui/system";
 interface HeatmapResponseTimeProps {
   checks: ICheck[];
+  gap?: ResponsiveStyleValue<number | string>;
   availabilityCellSx?: SxProps;
   responseCellSx?: SxProps;
 }
 
 export const HeatmapResponseTime = ({
   checks,
+  gap,
   availabilityCellSx,
   responseCellSx,
 }: HeatmapResponseTimeProps) => {
   const theme = useTheme();
 
+  if (!gap) {
+    gap = theme.spacing(0.5);
+  }
+
   if (!checks || checks.length === 0) return null;
   let data = Array<any>();
 
@@ -38,7 +46,7 @@ export const HeatmapResponseTime = ({
           width: "100%",
           display: "grid",
           gridTemplateColumns: "repeat(25, 1fr)",
-          gap: theme.spacing(0.5),
+          gap: gap,
           alignItems: "stretch",
         }}
       >
diff --git a/client/src/components/status-pages/StatusPageRow.tsx b/client/src/components/status-pages/StatusPageRow.tsx
index 3cbb45165..cddef6181 100644
--- a/client/src/components/status-pages/StatusPageRow.tsx
+++ b/client/src/components/status-pages/StatusPageRow.tsx
@@ -24,6 +24,7 @@ export const StatusPageRow = ({ monitor }: { monitor: IMonitor }) => {
       </Grid>
       <Grid size={12} marginTop={theme.spacing(2)}>
         <HeatmapResponseTime
+          gap={{ xs: theme.spacing(0.5), md: theme.spacing(2) }}
           checks={monitor?.latestChecks}
           availabilityCellSx={{
             borderRadius: {