TRX/Checkmate
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: prevent monitor URL and name overflow using MUI sx prop

Browse Source
This commit is contained in:
varunrmantri23 committed 2025-06-08 14:33:56 +05:30
1 parent 1f6826e045
commit e4ade39db7
5 files changed
+52 -24
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/Components/MonitorDetailsControlHeader/status.jsx
+14 -3
View File
@@ -29,7 +29,12 @@ const Status = ({ monitor }) => {
<Stack>
<Typography
variant="h1"
className="monitor-name-text"
sx={{
maxWidth: "45vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{monitor?.name}
</Typography>
@@ -41,8 +46,14 @@ const Status = ({ monitor }) => {
<PulseDot color={statusColor[determineState(monitor)]} />
<Typography
variant="h2"
style={{ fontFamily: "monospace", fontWeight: "bolder" }}
className="monitor-url-text"
sx={{
fontFamily: "monospace",
fontWeight: "bolder",
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
</Typography>
client/src/Components/MonitorStatusHeader/index.jsx
+14 -2
View File
@@ -23,7 +23,12 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
<Stack>
<Typography
variant="h1"
className="monitor-name-text"
sx={{
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{monitor?.name}
</Typography>
@@ -36,7 +41,14 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
<Typography
component="h2"
variant="h2"
className="monitor-url-text"
sx={{
fontFamily: "monospace",
fontWeight: "bolder",
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
</Typography>
client/src/Pages/PageSpeed/Configure/index.jsx
+12 -2
View File
@@ -203,7 +203,12 @@ const PageSpeedConfigure = () => {
<Typography
component="h1"
variant="h1"
className="monitor-name-text"
sx={{
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{monitor.name}
</Typography>
@@ -236,7 +241,12 @@ const PageSpeedConfigure = () => {
<Typography
component="h2"
variant="h2"
className="monitor-url-text"
sx={{
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{monitor.url?.replace(/^https?:\/\//, "") || "..."}
</Typography>
client/src/Pages/Uptime/Configure/index.jsx
+12 -2
View File
@@ -249,7 +249,12 @@ const Configure = () => {
<Typography
component="h1"
variant="h1"
className="monitor-name-text"
sx={{
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{monitor.name}
</Typography>
@@ -282,7 +287,12 @@ const Configure = () => {
<Typography
component="h2"
variant="h2"
className="monitor-url-text"
sx={{
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{monitor.url?.replace(/^https?:\/\//, "") || "..."}
</Typography>
client/src/index.css
-15
View File
@@ -84,21 +84,6 @@ html {
display: none;
}
/*adding the classes for handling the overflow of url and name for monitors in one place*/
.monitor-url-text {
max-width: 70vh;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.monitor-name-text {
max-width: 70vh;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@keyframes ripple {
from {
opacity: 1;