From e818f1cd610a56a4cd3fd6c4e5ff606f70ad13a1 Mon Sep 17 00:00:00 2001
From: Deepanshu <deepanshusaini2711@gmail.com>
Date: Tue, 17 Jun 2025 10:57:30 +0530
Subject: [PATCH] chore: fix formatting

---
 .../MonitorDetailsControlHeader/index.jsx     | 86 +++++++++----------
 .../MonitorDetailsControlHeader/status.jsx    | 50 ++++++-----
 2 files changed, 70 insertions(+), 66 deletions(-)

diff --git a/client/src/Components/MonitorDetailsControlHeader/index.jsx b/client/src/Components/MonitorDetailsControlHeader/index.jsx
index 9db38c0cf..5ad665069 100644
--- a/client/src/Components/MonitorDetailsControlHeader/index.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/index.jsx
@@ -56,49 +56,49 @@ const MonitorDetailsControlHeader = ({
 		>
 			<Status monitor={monitor} />
 
-      <Stack
-        direction="row"
-        gap={theme.spacing(2)}
-      >
-        <Button
-          variant="contained"
-          color="secondary"
-          loading={isSending}
-          startIcon={<EmailIcon />}
-          onClick={() => {
-            testAllNotifications({ monitorId: monitor?._id });
-          }}
-          sx={{
-            whiteSpace: 'nowrap',
-          }}
-        >
-          {t("sendTestNotifications")}
-        </Button>
-        <Button
-          variant="contained"
-          color="secondary"
-          onClick={(e) => {
-            navigate(`/incidents/${monitor?._id}`);
-          }}
-        >
-          {t("menu.incidents")}
-        </Button>
-        <Button
-          variant="contained"
-          color="secondary"
-          loading={isPausing}
-          startIcon={
-            monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
-          }
-          onClick={() => {
-            pauseMonitor({
-              monitorId: monitor?._id,
-              triggerUpdate,
-            });
-          }}
-        >
-          {monitor?.isActive ? "Pause" : "Resume"}
-        </Button>
+			<Stack
+				direction="row"
+				gap={theme.spacing(2)}
+			>
+				<Button
+					variant="contained"
+					color="secondary"
+					loading={isSending}
+					startIcon={<EmailIcon />}
+					onClick={() => {
+						testAllNotifications({ monitorId: monitor?._id });
+					}}
+					sx={{
+						whiteSpace: "nowrap",
+					}}
+				>
+					{t("sendTestNotifications")}
+				</Button>
+				<Button
+					variant="contained"
+					color="secondary"
+					onClick={(e) => {
+						navigate(`/incidents/${monitor?._id}`);
+					}}
+				>
+					{t("menu.incidents")}
+				</Button>
+				<Button
+					variant="contained"
+					color="secondary"
+					loading={isPausing}
+					startIcon={
+						monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
+					}
+					onClick={() => {
+						pauseMonitor({
+							monitorId: monitor?._id,
+							triggerUpdate,
+						});
+					}}
+				>
+					{monitor?.isActive ? "Pause" : "Resume"}
+				</Button>
 
 				{isAdmin && (
 					<Button
diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx
index f5c9aa597..5371fe445 100644
--- a/client/src/Components/MonitorDetailsControlHeader/status.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/status.jsx
@@ -23,30 +23,34 @@ import { useMonitorUtils } from "../../Hooks/useMonitorUtils";
 const Status = ({ monitor }) => {
 	const theme = useTheme();
 	const { statusColor, determineState } = useMonitorUtils();
+	const URL_TRUNCATION_LENGTH = 55;
 
-  return (
-    <Stack>
-      <Typography variant="monitorName">{monitor?.name}</Typography>
-      <Stack
-        direction="row"
-        alignItems={"center"}
-        gap={theme.spacing(4)}
-      >
-        <PulseDot color={statusColor[determineState(monitor)]} />
-        <Typography variant="monitorUrl" noWrap>
-          {monitor?.url ? (
-            monitor.url?.length > 55
-              ? `${monitor.url.replace(/^https?:\/\//, "")?.slice(0, 55)}…`
-              : monitor.url.replace(/^https?:\/\//, "")
-          ) : "…"}
-        </Typography>
-        <Dot />
-        <Typography>
-          Checking every {formatDurationRounded(monitor?.interval)}.
-        </Typography>
-      </Stack>
-    </Stack>
-  );
+	return (
+		<Stack>
+			<Typography variant="monitorName">{monitor?.name}</Typography>
+			<Stack
+				direction="row"
+				alignItems={"center"}
+				gap={theme.spacing(4)}
+			>
+				<PulseDot color={statusColor[determineState(monitor)]} />
+				<Typography
+					variant="monitorUrl"
+					noWrap
+				>
+					{monitor?.url
+						? monitor.url?.length > URL_TRUNCATION_LENGTH
+							? `${monitor.url.replace(/^https?:\/\//, "")?.slice(0, URL_TRUNCATION_LENGTH)}…`
+							: monitor.url.replace(/^https?:\/\//, "")
+						: "…"}
+				</Typography>
+				<Dot />
+				<Typography>
+					Checking every {formatDurationRounded(monitor?.interval)}.
+				</Typography>
+			</Stack>
+		</Stack>
+	);
 };
 
 Status.propTypes = {