fix: add CSS classes to prevent URL and name overflow in monitors

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>

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>

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>

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>

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;