Merge pull request #2408 from varunrmantri23/develop

fix: prevent monitor URL and name overflow with sx Prop

client/src/Components/MonitorDetailsControlHeader/status.jsx

@@ -27,17 +27,14 @@ const Status = ({ monitor }) => {
 
 	return (
 		<Stack>
-			<Typography variant="h1">{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"
-					style={{ fontFamily: "monospace", fontWeight: "bolder" }}
-				>
+				<Typography variant="monitorUrl">
 					{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
 				</Typography>
 				<Dot />

client/src/Components/MonitorStatusHeader/index.jsx

@@ -21,7 +21,7 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
 			justifyContent="space-between"
 		>
 			<Stack>
-				<Typography variant="h1">{monitor?.name}</Typography>
+				<Typography variant="monitorName">{monitor?.name}</Typography>
 				<Stack
 					direction="row"
 					alignItems={"center"}
@@ -29,8 +29,8 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
 				>
 					<PulseDot color={statusColor[determineState(monitor)]} />
 					<Typography
-						variant="h2"
-						style={{ fontFamily: "monospace", fontWeight: "bolder" }}
+						component="h2"
+						variant="monitorUrl"
 					>
 						{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
 					</Typography>

client/src/Pages/PageSpeed/Configure/index.jsx

@@ -202,7 +202,7 @@ const PageSpeedConfigure = () => {
 							<Box>
 								<Typography
 									component="h1"
-									variant="h1"
+									variant="monitorName"
 								>
 									{monitor.name}
 								</Typography>
@@ -234,7 +234,7 @@ const PageSpeedConfigure = () => {
 									</Tooltip>
 									<Typography
 										component="h2"
-										variant="h2"
+										variant="monitorUrl"
 									>
 										{monitor.url?.replace(/^https?:\/\//, "") || "..."}
 									</Typography>

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"
 				>

client/src/Pages/Uptime/Configure/index.jsx

@@ -248,7 +248,7 @@ const Configure = () => {
 							<Box>
 								<Typography
 									component="h1"
-									variant="h1"
+									variant="monitorName"
 								>
 									{monitor.name}
 								</Typography>
@@ -280,7 +280,7 @@ const Configure = () => {
 									</Tooltip>
 									<Typography
 										component="h2"
-										variant="h2"
+										variant="monitorUrl"
 									>
 										{monitor.url?.replace(/^https?:\/\//, "") || "..."}
 									</Typography>

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,