diff --git a/client/src/Components/MonitorDetailsControlHeader/index.jsx b/client/src/Components/MonitorDetailsControlHeader/index.jsx
index d569ec840..5ad665069 100644
--- a/client/src/Components/MonitorDetailsControlHeader/index.jsx
+++ b/client/src/Components/MonitorDetailsControlHeader/index.jsx
@@ -68,6 +68,9 @@ const MonitorDetailsControlHeader = ({
onClick={() => {
testAllNotifications({ monitorId: monitor?._id });
}}
+ sx={{
+ whiteSpace: "nowrap",
+ }}
>
{t("sendTestNotifications")}
diff --git a/client/src/Components/MonitorDetailsControlHeader/status.jsx b/client/src/Components/MonitorDetailsControlHeader/status.jsx
index fdfb955f4..65671a609 100644
--- a/client/src/Components/MonitorDetailsControlHeader/status.jsx
+++ b/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)}
>
-
- {monitor?.url?.replace(/^https?:\/\//, "") || "..."}
-
+ {formatMonitorUrl(monitor?.url)}
Checking every {formatDurationRounded(monitor?.interval)}.
diff --git a/client/src/Utils/utils.js b/client/src/Utils/utils.js
index 8bd9c9019..81ec44b06 100644
--- a/client/src/Utils/utils.js
+++ b/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;
+};