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

fix: add global Typography variants for monitor text truncation

Browse Source
This commit is contained in:
varunrmantri23 committed 2025-06-08 23:12:48 +05:30
1 parent e4ade39db7
commit 5e2fa7a8f0
6 files changed
+38 -71
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

client/src/Components/MonitorDetailsControlHeader/status.jsx
+2 -22
View File
@@ -27,34 +27,14 @@ const Status = ({ monitor }) => {
return (
<Stack>
<Typography
variant="h1"
sx={{
maxWidth: "45vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{monitor?.name}
</Typography>
<Typography variant="monitorName">{monitor?.name}</Typography>
<Stack
direction="row"
alignItems={"center"}
gap={theme.spacing(4)}
>
<PulseDot color={statusColor[determineState(monitor)]} />
<Typography
variant="h2"
sx={{
fontFamily: "monospace",
fontWeight: "bolder",
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
<Typography variant="monitorUrl">
{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
</Typography>
<Dot />
client/src/Components/MonitorStatusHeader/index.jsx
+2 -20
View File
@@ -21,17 +21,7 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
justifyContent="space-between"
>
<Stack>
<Typography
variant="h1"
sx={{
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
>
{monitor?.name}
</Typography>
<Typography variant="monitorName">{monitor?.name}</Typography>
<Stack
direction="row"
alignItems={"center"}
@@ -40,15 +30,7 @@ const MonitorStatusHeader = ({ path, isLoading = false, isAdmin, monitor }) => {
<PulseDot color={statusColor[determineState(monitor)]} />
<Typography
component="h2"
variant="h2"
sx={{
fontFamily: "monospace",
fontWeight: "bolder",
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
variant="monitorUrl"
>
{monitor?.url?.replace(/^https?:\/\//, "") || "..."}
</Typography>
client/src/Pages/PageSpeed/Configure/index.jsx
+2 -14
View File
@@ -202,13 +202,7 @@ const PageSpeedConfigure = () => {
<Box>
<Typography
component="h1"
variant="h1"
sx={{
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
variant="monitorName"
>
{monitor.name}
</Typography>
@@ -240,13 +234,7 @@ const PageSpeedConfigure = () => {
</Tooltip>
<Typography
component="h2"
variant="h2"
sx={{
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
variant="monitorUrl"
>
{monitor.url?.replace(/^https?:\/\//, "") || "..."}
</Typography>
client/src/Pages/PageSpeed/Monitors/Components/Card/index.jsx
+1 -1
View File
@@ -245,7 +245,7 @@ const Card = ({ monitor }) => {
</IconBox>
<Typography
component="h2"
variant="h2"
variant="monitorUrl"
fontWeight={500}
alignSelf="center"
>
client/src/Pages/Uptime/Configure/index.jsx
+2 -14
View File
@@ -248,13 +248,7 @@ const Configure = () => {
<Box>
<Typography
component="h1"
variant="h1"
sx={{
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
variant="monitorName"
>
{monitor.name}
</Typography>
@@ -286,13 +280,7 @@ const Configure = () => {
</Tooltip>
<Typography
component="h2"
variant="h2"
sx={{
maxWidth: "60vw",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
}}
variant="monitorUrl"
>
{monitor.url?.replace(/^https?:\/\//, "") || "..."}
</Typography>
client/src/Utils/Theme/globalTheme.js
+29
View File
@@ -632,6 +632,35 @@ const baseTheme = (palette) => ({
}),
},
},
MuiTypography: {
variants: [
{
props: { variant: "monitorName" },
style: {
fontSize: typographyLevels.xl,
color: palette.primary.contrastText,
fontWeight: 500,
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
maxWidth: "calc((100vw - var(--env-var-width-2)) / 2)",
},
},
{
props: { variant: "monitorUrl" },
style: {
fontSize: typographyLevels.l,
color: palette.primary.contrastTextSecondary,
fontWeight: "bolder",
fontFamily: "monospace",
overflow: "hidden",
textOverflow: "ellipsis",
whiteSpace: "nowrap",
maxWidth: "calc((100vw - var(--env-var-width-2)) / 2)",
},
},
],
},
},
shape: {
borderRadius: 2,