From 66efa25e2b007daa45fbf35164b0c9e6561f27fc Mon Sep 17 00:00:00 2001
From: mannilakash <mannilakash@gmail.com>
Date: Wed, 28 Jan 2026 14:36:51 -0500
Subject: [PATCH 1/2] fix: latest incidents panel overflow text on smaller
 devices

---
 .../LatestIncidentsPanel/IncidentItem.jsx          | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/client/src/Pages/Incidents/Components/LatestIncidentsPanel/IncidentItem.jsx b/client/src/Pages/Incidents/Components/LatestIncidentsPanel/IncidentItem.jsx
index ca5bb640f..c9bf9abd2 100644
--- a/client/src/Pages/Incidents/Components/LatestIncidentsPanel/IncidentItem.jsx
+++ b/client/src/Pages/Incidents/Components/LatestIncidentsPanel/IncidentItem.jsx
@@ -30,12 +30,22 @@ const IncidentItem = ({ incident }) => {
 	return (
 		<Box
 			sx={{
-				display: "grid",
-				gridTemplateColumns: "1fr 100px 80px",
+				display: {
+					xs: "flex",
+					lg: "grid",
+				},
 				alignItems: "center",
+				flexWrap: {
+					xs: "wrap",
+					lg: "nowrap",
+				},
 				gap: theme.spacing(2),
 				width: "100%",
 				py: theme.spacing(0.5),
+
+				gridTemplateColumns: {
+					lg: "1fr 100px 80px",
+				},
 			}}
 		>
 			<Stack

From a154ad11b5ba12c47f17694d85ed7bcb9cbaaaab Mon Sep 17 00:00:00 2001
From: mannilakash <mannilakash@gmail.com>
Date: Thu, 29 Jan 2026 13:21:56 -0500
Subject: [PATCH 2/2] fix: latest incident panel: Box -> Grid

---
 .../LatestIncidentsPanel/IncidentItem.jsx     | 67 +++++++++++--------
 1 file changed, 38 insertions(+), 29 deletions(-)

diff --git a/client/src/Pages/Incidents/Components/LatestIncidentsPanel/IncidentItem.jsx b/client/src/Pages/Incidents/Components/LatestIncidentsPanel/IncidentItem.jsx
index c9bf9abd2..e8001087b 100644
--- a/client/src/Pages/Incidents/Components/LatestIncidentsPanel/IncidentItem.jsx
+++ b/client/src/Pages/Incidents/Components/LatestIncidentsPanel/IncidentItem.jsx
@@ -6,6 +6,7 @@ import { getHumanReadableDuration } from "@/Utils/timeUtilsLegacy.js";
 import Icon from "@/Components/v1/Icon";
 import { useTranslation } from "react-i18next";
 import useGetIncidentsDuration from "../../hooks/useGetIncidentsDuration";
+import { Grid } from "@mui/material";
 
 const IncidentItem = ({ incident }) => {
 	const { t } = useTranslation();
@@ -28,30 +29,24 @@ const IncidentItem = ({ incident }) => {
 	};
 
 	return (
-		<Box
+		<Grid
+			container
+			alignItems="center"
+			spacing={2}
 			sx={{
-				display: {
-					xs: "flex",
-					lg: "grid",
-				},
-				alignItems: "center",
-				flexWrap: {
-					xs: "wrap",
-					lg: "nowrap",
-				},
-				gap: theme.spacing(2),
 				width: "100%",
 				py: theme.spacing(0.5),
-
-				gridTemplateColumns: {
-					lg: "1fr 100px 80px",
-				},
 			}}
 		>
-			<Stack
-				direction="row"
-				alignItems="center"
-				gap={theme.spacing(2)}
+			<Grid
+				item
+				xs={12}
+				lg={5}
+				sx={{
+					display: "flex",
+					alignItems: "center",
+					gap: theme.spacing(2),
+				}}
 			>
 				<Box sx={iconWrapperStyle}>
 					<Icon
@@ -66,9 +61,18 @@ const IncidentItem = ({ incident }) => {
 				>
 					{incident.monitorName || t("incidentsPage.unknownMonitor")}
 				</Typography>
-			</Stack>
+			</Grid>
 
-			<Box sx={{ display: "flex", justifyContent: "center" }}>
+			<Grid
+				item
+				xs={12}
+				md={6}
+				lg={3}
+				sx={{
+					display: "flex",
+					justifyContent: { xs: "flex-start", md: "center" },
+				}}
+			>
 				<StatusLabel
 					status={isActive ? "down" : "up"}
 					text={isActive ? t("incidentsPage.active") : t("incidentsPage.resolved")}
@@ -76,16 +80,21 @@ const IncidentItem = ({ incident }) => {
 						textTransform: "capitalize",
 					}}
 				/>
-			</Box>
+			</Grid>
 
-			<Typography
-				variant="body1"
-				fontWeight={500}
-				textAlign="right"
+			<Grid
+				item
+				xs={12}
+				md={6}
+				lg={4}
+				sx={{
+					textAlign: { xs: "left", md: "right" },
+					fontWeight: 500,
+				}}
 			>
-				{duration}
-			</Typography>
-		</Box>
+				<Typography variant="body1">{duration}</Typography>
+			</Grid>
+		</Grid>
 	);
 };