Merge pull request #2473 from deepanshu2711/fix/floating-strings-2470

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

client/src/Components/MonitorDetailsControlHeader/index.jsx

@@ -68,6 +68,9 @@ const MonitorDetailsControlHeader = ({
 					onClick={() => {
 						testAllNotifications({ monitorId: monitor?._id });
 					}}
+					sx={{
+						whiteSpace: "nowrap",
+					}}
 				>
 					{t("sendTestNotifications")}
 				</Button>

client/src/Components/MonitorDetailsControlHeader/status.jsx

@@ -8,6 +8,7 @@ import { formatDurationRounded } from "../../Utils/timeUtils";
 import PropTypes from "prop-types";
 import { useTheme } from "@emotion/react";
 import { useMonitorUtils } from "../../Hooks/useMonitorUtils";
+import { formatMonitorUrl } from "../../Utils/utils";
 /**
  * Status component displays the status information of a monitor.
  * It includes the monitor's name, URL, and check interval.
@@ -33,9 +34,7 @@ const Status = ({ monitor }) => {
 				gap={theme.spacing(4)}
 			>
 				<PulseDot color={statusColor[determineState(monitor)]} />
-				<Typography variant="monitorUrl">
-					{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
-				</Typography>
+				<Typography variant="monitorUrl">{formatMonitorUrl(monitor?.url)}</Typography>
 				<Dot />
 				<Typography>
 					Checking every {formatDurationRounded(monitor?.interval)}.

client/src/Utils/utils.js

@@ -5,3 +5,11 @@ export const safelyParseFloat = (value) => {
 	}
 	return parsedValue;
 };
+
+export const formatMonitorUrl = (url, maxLength = 55) => {
+	if (!url) return "";
+	const strippedUrl = url.replace(/^https?:\/\//, "");
+	return strippedUrl.length > maxLength
+		? `${strippedUrl.slice(0, maxLength)}…`
+		: strippedUrl;
+};