From 04c3c57a59f4657887ce68ca84d06918aa8b91c2 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Sat, 28 Feb 2026 21:27:33 +0000
Subject: [PATCH] card-details

---
 .../Incidents/Components/CardDetails.tsx      | 21 ++++++++++---------
 1 file changed, 11 insertions(+), 10 deletions(-)

diff --git a/client/src/Pages/Incidents/Components/CardDetails.tsx b/client/src/Pages/Incidents/Components/CardDetails.tsx
index 70f3bc6e3..448ba2e69 100644
--- a/client/src/Pages/Incidents/Components/CardDetails.tsx
+++ b/client/src/Pages/Incidents/Components/CardDetails.tsx
@@ -3,6 +3,7 @@ import Grid from "@mui/material/Grid";
 import Divider from "@mui/material/Divider";
 import Typography from "@mui/material/Typography";
 import { BaseBox, ValueLabel } from "@/Components/design-elements";
+import { LAYOUT } from "@/Utils/Theme/constants";
 
 import { useTranslation } from "react-i18next";
 import type { Incident } from "@/Types/Incident";
@@ -29,14 +30,14 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 	}
 	return (
 		<Stack
-			gap={theme.spacing(4)}
+			gap={theme.spacing(LAYOUT.MD)}
 			sx={sx}
 		>
 			<Typography textTransform={"uppercase"}>
 				{t("pages.incidents.dialog.details.title")}
 			</Typography>
-			<BaseBox padding={8}>
-				<Stack gap={theme.spacing(4)}>
+			<BaseBox padding={LAYOUT.MD}>
+				<Stack gap={theme.spacing(LAYOUT.MD)}>
 					<Typography textTransform={"uppercase"}>
 						{t("pages.incidents.dialog.details.overview")}
 					</Typography>
@@ -44,7 +45,7 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 
 					<Grid
 						container
-						spacing={theme.spacing(4)}
+						spacing={theme.spacing(LAYOUT.MD)}
 						alignItems="center"
 					>
 						<Grid size={2}>{t("pages.incidents.dialog.details.status")}</Grid>
@@ -75,15 +76,15 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 					</Grid>
 				</Stack>
 			</BaseBox>
-			<BaseBox padding={8}>
-				<Stack gap={theme.spacing(4)}>
+			<BaseBox padding={LAYOUT.MD}>
+				<Stack gap={theme.spacing(LAYOUT.MD)}>
 					<Typography textTransform={"uppercase"}>
 						{t("pages.incidents.dialog.details.analysis")}
 					</Typography>
 					<Divider />
 					<Grid
 						container
-						spacing={theme.spacing(2)}
+						spacing={theme.spacing(LAYOUT.MD)}
 					>
 						<Grid size={6}>
 							<Typography>{t("pages.incidents.dialog.details.timeline")}</Typography>
@@ -127,15 +128,15 @@ export const CardDetails = ({ incident, monitor, sx }: CardDetailsProps) => {
 				</Stack>
 			</BaseBox>
 			{!incident.status && (
-				<BaseBox padding={8}>
-					<Stack gap={theme.spacing(4)}>
+				<BaseBox padding={LAYOUT.MD}>
+					<Stack gap={theme.spacing(LAYOUT.XS)}>
 						<Typography textTransform={"uppercase"}>
 							{t("pages.incidents.dialog.details.resolutionDetails")}
 						</Typography>
 						<Divider />
 						<Grid
 							container
-							spacing={theme.spacing(2)}
+							spacing={theme.spacing(LAYOUT.MD)}
 							alignItems="center"
 						>
 							<Grid size={2}>