fix(ui): shorten URL label and resize notification button (#2470)

client/src/Components/MonitorDetailsControlHeader/index.jsx

@@ -56,46 +56,49 @@ const MonitorDetailsControlHeader = ({
 		>
 			<Status monitor={monitor} />
 
-			<Stack
-				direction="row"
-				gap={theme.spacing(2)}
-			>
-				<Button
-					variant="contained"
-					color="secondary"
-					loading={isSending}
-					startIcon={<EmailIcon />}
-					onClick={() => {
-						testAllNotifications({ monitorId: monitor?._id });
-					}}
-				>
-					{t("sendTestNotifications")}
-				</Button>
-				<Button
-					variant="contained"
-					color="secondary"
-					onClick={(e) => {
-						navigate(`/incidents/${monitor?._id}`);
-					}}
-				>
-					{t("menu.incidents")}
-				</Button>
-				<Button
-					variant="contained"
-					color="secondary"
-					loading={isPausing}
-					startIcon={
-						monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
-					}
-					onClick={() => {
-						pauseMonitor({
-							monitorId: monitor?._id,
-							triggerUpdate,
-						});
-					}}
-				>
-					{monitor?.isActive ? "Pause" : "Resume"}
-				</Button>
+      <Stack
+        direction="row"
+        gap={theme.spacing(2)}
+      >
+        <Button
+          variant="contained"
+          color="secondary"
+          loading={isSending}
+          startIcon={<EmailIcon />}
+          onClick={() => {
+            testAllNotifications({ monitorId: monitor?._id });
+          }}
+          sx={{
+            whiteSpace: 'nowrap',
+          }}
+        >
+          {t("sendTestNotifications")}
+        </Button>
+        <Button
+          variant="contained"
+          color="secondary"
+          onClick={(e) => {
+            navigate(`/incidents/${monitor?._id}`);
+          }}
+        >
+          {t("menu.incidents")}
+        </Button>
+        <Button
+          variant="contained"
+          color="secondary"
+          loading={isPausing}
+          startIcon={
+            monitor?.isActive ? <PauseOutlinedIcon /> : <PlayArrowOutlinedIcon />
+          }
+          onClick={() => {
+            pauseMonitor({
+              monitorId: monitor?._id,
+              triggerUpdate,
+            });
+          }}
+        >
+          {monitor?.isActive ? "Pause" : "Resume"}
+        </Button>
 
 				{isAdmin && (
 					<Button

client/src/Components/MonitorDetailsControlHeader/status.jsx

@@ -24,25 +24,29 @@ const Status = ({ monitor }) => {
 	const theme = useTheme();
 	const { statusColor, determineState } = useMonitorUtils();
 
-	return (
-		<Stack>
-			<Typography variant="monitorName">{monitor?.name}</Typography>
-			<Stack
-				direction="row"
-				alignItems={"center"}
-				gap={theme.spacing(4)}
-			>
-				<PulseDot color={statusColor[determineState(monitor)]} />
-				<Typography variant="monitorUrl">
-					{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
-				</Typography>
-				<Dot />
-				<Typography>
-					Checking every {formatDurationRounded(monitor?.interval)}.
-				</Typography>
-			</Stack>
-		</Stack>
-	);
+  return (
+    <Stack>
+      <Typography variant="monitorName">{monitor?.name}</Typography>
+      <Stack
+        direction="row"
+        alignItems={"center"}
+        gap={theme.spacing(4)}
+      >
+        <PulseDot color={statusColor[determineState(monitor)]} />
+        <Typography variant="monitorUrl" noWrap>
+          {monitor?.url ? (
+            monitor.url?.length > 55
+              ? `${monitor.url.replace(/^https?:\/\//, "")?.slice(0, 55)}…`
+              : monitor.url.replace(/^https?:\/\//, "")
+          ) : "…"}
+        </Typography>
+        <Dot />
+        <Typography>
+          Checking every {formatDurationRounded(monitor?.interval)}.
+        </Typography>
+      </Stack>
+    </Stack>
+  );
 };
 
 Status.propTypes = {