From 1f6826e04590c76ea6df8d4b6d46d1cf582ea005 Mon Sep 17 00:00:00 2001
From: varunrmantri23 <varunrmantri23@gmail.com>
Date: Sun, 8 Jun 2025 12:53:30 +0530
Subject: [PATCH 1/3] fix: add CSS classes to prevent URL and name overflow in
 monitors

---
 .../MonitorDetailsControlHeader/status.jsx        |  8 +++++++-
 .../src/Components/MonitorStatusHeader/index.jsx  | 10 ++++++++--
 client/src/Pages/PageSpeed/Configure/index.jsx    |  2 ++
 client/src/Pages/Uptime/Configure/index.jsx       |  2 ++
 client/src/index.css                              | 15 +++++++++++++++
 5 files changed, 34 insertions(+), 3 deletions(-)

diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx
index 9e01dd502..685663695 100644
--- a/client/src/Components/MonitorDetailsControlHeader/status.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/status.jsx
@@ -27,7 +27,12 @@ const Status = ({ monitor }) => {
 
 	return (
 		<Stack>
-			<Typography variant="h1">{monitor?.name}</Typography>
+			<Typography
+				variant="h1"
+				className="monitor-name-text"
+			>
+				{monitor?.name}
+			</Typography>
 			<Stack
 				direction="row"
 				alignItems={"center"}
@@ -37,6 +42,7 @@ const Status = ({ monitor }) => {
 				<Typography
 					variant="h2"
 					style={{ fontFamily: "monospace", fontWeight: "bolder" }}
+					className="monitor-url-text"
 				>
 					{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
 				</Typography>
diff --git a/client/src/Components/MonitorStatusHeader/index.jsx b/client/src/Components/MonitorStatusHeader/index.jsx
index edadfb8df..71ce80679 100644
--- a/client/src/Components/MonitorStatusHeader/index.jsx
+++ b/client/src/Components/MonitorStatusHeader/index.jsx
@@ -21,7 +21,12 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
 			justifyContent="space-between"
 		>
 			<Stack>
-				<Typography variant="h1">{monitor?.name}</Typography>
+				<Typography
+					variant="h1"
+					className="monitor-name-text"
+				>
+					{monitor?.name}
+				</Typography>
 				<Stack
 					direction="row"
 					alignItems={"center"}
@@ -29,8 +34,9 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
 				>
 					<PulseDot color={statusColor[determineState(monitor)]} />
 					<Typography
+						component="h2"
 						variant="h2"
-						style={{ fontFamily: "monospace", fontWeight: "bolder" }}
+						className="monitor-url-text"
 					>
 						{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
 					</Typography>
diff --git a/client/src/Pages/PageSpeed/Configure/index.jsx b/client/src/Pages/PageSpeed/Configure/index.jsx
index d81387e1b..5305f8b59 100644
--- a/client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/client/src/Pages/PageSpeed/Configure/index.jsx
@@ -203,6 +203,7 @@ const PageSpeedConfigure = () => {
 								<Typography
 									component="h1"
 									variant="h1"
+									className="monitor-name-text"
 								>
 									{monitor.name}
 								</Typography>
@@ -235,6 +236,7 @@ const PageSpeedConfigure = () => {
 									<Typography
 										component="h2"
 										variant="h2"
+										className="monitor-url-text"
 									>
 										{monitor.url?.replace(/^https?:\/\//, "") || "..."}
 									</Typography>
diff --git a/client/src/Pages/Uptime/Configure/index.jsx b/client/src/Pages/Uptime/Configure/index.jsx
index 395486228..09cdbc0b9 100644
--- a/client/src/Pages/Uptime/Configure/index.jsx
+++ b/client/src/Pages/Uptime/Configure/index.jsx
@@ -249,6 +249,7 @@ const Configure = () => {
 								<Typography
 									component="h1"
 									variant="h1"
+									className="monitor-name-text"
 								>
 									{monitor.name}
 								</Typography>
@@ -281,6 +282,7 @@ const Configure = () => {
 									<Typography
 										component="h2"
 										variant="h2"
+										className="monitor-url-text"
 									>
 										{monitor.url?.replace(/^https?:\/\//, "") || "..."}
 									</Typography>
diff --git a/client/src/index.css b/client/src/index.css
index f83cdc461..8ede1627d 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -84,6 +84,21 @@ html {
 	display: none;
 }
 
+/*adding the classes for handling the overflow of url and name for monitors in one place*/
+.monitor-url-text {
+	max-width: 70vh;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.monitor-name-text {
+	max-width: 70vh;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 @keyframes ripple {
 	from {
 		opacity: 1;

From e4ade39db7352a73b85c597e3b2c1adad9f5b174 Mon Sep 17 00:00:00 2001
From: varunrmantri23 <varunrmantri23@gmail.com>
Date: Sun, 8 Jun 2025 13:25:57 +0530
Subject: [PATCH 2/3] fix: prevent monitor URL and name overflow using MUI sx
 prop

---
 .../MonitorDetailsControlHeader/status.jsx      | 17 ++++++++++++++---
 .../Components/MonitorStatusHeader/index.jsx    | 16 ++++++++++++++--
 client/src/Pages/PageSpeed/Configure/index.jsx  | 14 ++++++++++++--
 client/src/Pages/Uptime/Configure/index.jsx     | 14 ++++++++++++--
 client/src/index.css                            | 15 ---------------
 5 files changed, 52 insertions(+), 24 deletions(-)

diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx
index 685663695..392779f4a 100644
--- a/client/src/Components/MonitorDetailsControlHeader/status.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/status.jsx
@@ -29,7 +29,12 @@ const Status = ({ monitor }) => {
 		<Stack>
 			<Typography
 				variant="h1"
-				className="monitor-name-text"
+				sx={{
+					maxWidth: "45vw",
+					overflow: "hidden",
+					textOverflow: "ellipsis",
+					whiteSpace: "nowrap",
+				}}
 			>
 				{monitor?.name}
 			</Typography>
@@ -41,8 +46,14 @@ const Status = ({ monitor }) => {
 				<PulseDot color={statusColor[determineState(monitor)]} />
 				<Typography
 					variant="h2"
-					style={{ fontFamily: "monospace", fontWeight: "bolder" }}
-					className="monitor-url-text"
+					sx={{
+						fontFamily: "monospace",
+						fontWeight: "bolder",
+						maxWidth: "60vw",
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+					}}
 				>
 					{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
 				</Typography>
diff --git a/client/src/Components/MonitorStatusHeader/index.jsx b/client/src/Components/MonitorStatusHeader/index.jsx
index 71ce80679..c7ae57c0b 100644
--- a/client/src/Components/MonitorStatusHeader/index.jsx
+++ b/client/src/Components/MonitorStatusHeader/index.jsx
@@ -23,7 +23,12 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
 			<Stack>
 				<Typography
 					variant="h1"
-					className="monitor-name-text"
+					sx={{
+						maxWidth: "60vw",
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+					}}
 				>
 					{monitor?.name}
 				</Typography>
@@ -36,7 +41,14 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
 					<Typography
 						component="h2"
 						variant="h2"
-						className="monitor-url-text"
+						sx={{
+							fontFamily: "monospace",
+							fontWeight: "bolder",
+							maxWidth: "60vw",
+							overflow: "hidden",
+							textOverflow: "ellipsis",
+							whiteSpace: "nowrap",
+						}}
 					>
 						{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
 					</Typography>
diff --git a/client/src/Pages/PageSpeed/Configure/index.jsx b/client/src/Pages/PageSpeed/Configure/index.jsx
index 5305f8b59..2ac6d27c0 100644
--- a/client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/client/src/Pages/PageSpeed/Configure/index.jsx
@@ -203,7 +203,12 @@ const PageSpeedConfigure = () => {
 								<Typography
 									component="h1"
 									variant="h1"
-									className="monitor-name-text"
+									sx={{
+										maxWidth: "60vw",
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										whiteSpace: "nowrap",
+									}}
 								>
 									{monitor.name}
 								</Typography>
@@ -236,7 +241,12 @@ const PageSpeedConfigure = () => {
 									<Typography
 										component="h2"
 										variant="h2"
-										className="monitor-url-text"
+										sx={{
+											maxWidth: "60vw",
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap",
+										}}
 									>
 										{monitor.url?.replace(/^https?:\/\//, "") || "..."}
 									</Typography>
diff --git a/client/src/Pages/Uptime/Configure/index.jsx b/client/src/Pages/Uptime/Configure/index.jsx
index 09cdbc0b9..16eb37492 100644
--- a/client/src/Pages/Uptime/Configure/index.jsx
+++ b/client/src/Pages/Uptime/Configure/index.jsx
@@ -249,7 +249,12 @@ const Configure = () => {
 								<Typography
 									component="h1"
 									variant="h1"
-									className="monitor-name-text"
+									sx={{
+										maxWidth: "60vw",
+										overflow: "hidden",
+										textOverflow: "ellipsis",
+										whiteSpace: "nowrap",
+									}}
 								>
 									{monitor.name}
 								</Typography>
@@ -282,7 +287,12 @@ const Configure = () => {
 									<Typography
 										component="h2"
 										variant="h2"
-										className="monitor-url-text"
+										sx={{
+											maxWidth: "60vw",
+											overflow: "hidden",
+											textOverflow: "ellipsis",
+											whiteSpace: "nowrap",
+										}}
 									>
 										{monitor.url?.replace(/^https?:\/\//, "") || "..."}
 									</Typography>
diff --git a/client/src/index.css b/client/src/index.css
index 8ede1627d..f83cdc461 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -84,21 +84,6 @@ html {
 	display: none;
 }
 
-/*adding the classes for handling the overflow of url and name for monitors in one place*/
-.monitor-url-text {
-	max-width: 70vh;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
-.monitor-name-text {
-	max-width: 70vh;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	white-space: nowrap;
-}
-
 @keyframes ripple {
 	from {
 		opacity: 1;

From 5e2fa7a8f0a9c4b045c43e33c041228b3c87e59e Mon Sep 17 00:00:00 2001
From: varunrmantri23 <varunrmantri23@gmail.com>
Date: Sun, 8 Jun 2025 23:12:48 +0530
Subject: [PATCH 3/3] fix: add global Typography variants for monitor text
 truncation

---
 .../MonitorDetailsControlHeader/status.jsx    | 24 ++-------------
 .../Components/MonitorStatusHeader/index.jsx  | 22 ++------------
 .../src/Pages/PageSpeed/Configure/index.jsx   | 16 ++--------
 .../Monitors/Components/Card/index.jsx        |  2 +-
 client/src/Pages/Uptime/Configure/index.jsx   | 16 ++--------
 client/src/Utils/Theme/globalTheme.js         | 29 +++++++++++++++++++
 6 files changed, 38 insertions(+), 71 deletions(-)

diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx
index 392779f4a..3d6e62c60 100644
--- a/client/src/Components/MonitorDetailsControlHeader/status.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/status.jsx
@@ -27,34 +27,14 @@ const Status = ({ monitor }) => {
 
 	return (
 		<Stack>
-			<Typography
-				variant="h1"
-				sx={{
-					maxWidth: "45vw",
-					overflow: "hidden",
-					textOverflow: "ellipsis",
-					whiteSpace: "nowrap",
-				}}
-			>
-				{monitor?.name}
-			</Typography>
+			<Typography variant="monitorName">{monitor?.name}</Typography>
 			<Stack
 				direction="row"
 				alignItems={"center"}
 				gap={theme.spacing(4)}
 			>
 				<PulseDot color={statusColor[determineState(monitor)]} />
-				<Typography
-					variant="h2"
-					sx={{
-						fontFamily: "monospace",
-						fontWeight: "bolder",
-						maxWidth: "60vw",
-						overflow: "hidden",
-						textOverflow: "ellipsis",
-						whiteSpace: "nowrap",
-					}}
-				>
+				<Typography variant="monitorUrl">
 					{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
 				</Typography>
 				<Dot />
diff --git a/client/src/Components/MonitorStatusHeader/index.jsx b/client/src/Components/MonitorStatusHeader/index.jsx
index c7ae57c0b..14ae39b8a 100644
--- a/client/src/Components/MonitorStatusHeader/index.jsx
+++ b/client/src/Components/MonitorStatusHeader/index.jsx
@@ -21,17 +21,7 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
 			justifyContent="space-between"
 		>
 			<Stack>
-				<Typography
-					variant="h1"
-					sx={{
-						maxWidth: "60vw",
-						overflow: "hidden",
-						textOverflow: "ellipsis",
-						whiteSpace: "nowrap",
-					}}
-				>
-					{monitor?.name}
-				</Typography>
+				<Typography variant="monitorName">{monitor?.name}</Typography>
 				<Stack
 					direction="row"
 					alignItems={"center"}
@@ -40,15 +30,7 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
 					<PulseDot color={statusColor[determineState(monitor)]} />
 					<Typography
 						component="h2"
-						variant="h2"
-						sx={{
-							fontFamily: "monospace",
-							fontWeight: "bolder",
-							maxWidth: "60vw",
-							overflow: "hidden",
-							textOverflow: "ellipsis",
-							whiteSpace: "nowrap",
-						}}
+						variant="monitorUrl"
 					>
 						{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
 					</Typography>
diff --git a/client/src/Pages/PageSpeed/Configure/index.jsx b/client/src/Pages/PageSpeed/Configure/index.jsx
index 2ac6d27c0..19112314b 100644
--- a/client/src/Pages/PageSpeed/Configure/index.jsx
+++ b/client/src/Pages/PageSpeed/Configure/index.jsx
@@ -202,13 +202,7 @@ const PageSpeedConfigure = () => {
 							<Box>
 								<Typography
 									component="h1"
-									variant="h1"
-									sx={{
-										maxWidth: "60vw",
-										overflow: "hidden",
-										textOverflow: "ellipsis",
-										whiteSpace: "nowrap",
-									}}
+									variant="monitorName"
 								>
 									{monitor.name}
 								</Typography>
@@ -240,13 +234,7 @@ const PageSpeedConfigure = () => {
 									</Tooltip>
 									<Typography
 										component="h2"
-										variant="h2"
-										sx={{
-											maxWidth: "60vw",
-											overflow: "hidden",
-											textOverflow: "ellipsis",
-											whiteSpace: "nowrap",
-										}}
+										variant="monitorUrl"
 									>
 										{monitor.url?.replace(/^https?:\/\//, "") || "..."}
 									</Typography>
diff --git a/client/src/Pages/PageSpeed/Monitors/Components/Card/index.jsx b/client/src/Pages/PageSpeed/Monitors/Components/Card/index.jsx
index 36bf91eee..8c83f102a 100644
--- a/client/src/Pages/PageSpeed/Monitors/Components/Card/index.jsx
+++ b/client/src/Pages/PageSpeed/Monitors/Components/Card/index.jsx
@@ -245,7 +245,7 @@ const Card = ({ monitor }) => {
 				</IconBox>
 				<Typography
 					component="h2"
-					variant="h2"
+					variant="monitorUrl"
 					fontWeight={500}
 					alignSelf="center"
 				>
diff --git a/client/src/Pages/Uptime/Configure/index.jsx b/client/src/Pages/Uptime/Configure/index.jsx
index 16eb37492..f75e53e84 100644
--- a/client/src/Pages/Uptime/Configure/index.jsx
+++ b/client/src/Pages/Uptime/Configure/index.jsx
@@ -248,13 +248,7 @@ const Configure = () => {
 							<Box>
 								<Typography
 									component="h1"
-									variant="h1"
-									sx={{
-										maxWidth: "60vw",
-										overflow: "hidden",
-										textOverflow: "ellipsis",
-										whiteSpace: "nowrap",
-									}}
+									variant="monitorName"
 								>
 									{monitor.name}
 								</Typography>
@@ -286,13 +280,7 @@ const Configure = () => {
 									</Tooltip>
 									<Typography
 										component="h2"
-										variant="h2"
-										sx={{
-											maxWidth: "60vw",
-											overflow: "hidden",
-											textOverflow: "ellipsis",
-											whiteSpace: "nowrap",
-										}}
+										variant="monitorUrl"
 									>
 										{monitor.url?.replace(/^https?:\/\//, "") || "..."}
 									</Typography>
diff --git a/client/src/Utils/Theme/globalTheme.js b/client/src/Utils/Theme/globalTheme.js
index 631f056dd..59c26866a 100644
--- a/client/src/Utils/Theme/globalTheme.js
+++ b/client/src/Utils/Theme/globalTheme.js
@@ -632,6 +632,35 @@ const baseTheme = (palette) => ({
 				}),
 			},
 		},
+		MuiTypography: {
+			variants: [
+				{
+					props: { variant: "monitorName" },
+					style: {
+						fontSize: typographyLevels.xl,
+						color: palette.primary.contrastText,
+						fontWeight: 500,
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+						maxWidth: "calc((100vw - var(--env-var-width-2)) / 2)",
+					},
+				},
+				{
+					props: { variant: "monitorUrl" },
+					style: {
+						fontSize: typographyLevels.l,
+						color: palette.primary.contrastTextSecondary,
+						fontWeight: "bolder",
+						fontFamily: "monospace",
+						overflow: "hidden",
+						textOverflow: "ellipsis",
+						whiteSpace: "nowrap",
+						maxWidth: "calc((100vw - var(--env-var-width-2)) / 2)",
+					},
+				},
+			],
+		},
 	},
 	shape: {
 		borderRadius: 2,