gap

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",
         }}
       >

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: {