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>