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; +};