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] 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;