From 409f9f6dc6e31d167d706aaf64e670bbf04fdc16 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Sun, 7 Jun 2026 10:54:58 -0700 Subject: [PATCH 1/3] fix status page styling --- .../StatusPage/Status/themes/bold/styles.ts | 51 +++++++++++----- .../Status/themes/editorial/styles.ts | 43 +++++++++----- .../StatusPage/Status/themes/modern/styles.ts | 51 +++++++++++----- .../Status/themes/refined/styles.ts | 49 +++++++++++----- .../Status/themes/shared/BaseStatusPage.tsx | 58 ++++++++++--------- 5 files changed, 163 insertions(+), 89 deletions(-) diff --git a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts index 9153ab994..1fcec973a 100644 --- a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts @@ -99,9 +99,9 @@ export const boldStyles = ( }, top: { - display: "flex", - alignItems: "center", + alignItems: { xs: "flex-start", sm: "center" }, justifyContent: "space-between", + gap: "12px", mb: "36px", }, brand: { @@ -171,9 +171,15 @@ export const boldStyles = ( }), heroSub: { mt: "10px", mb: 0, color: tokens.textMuted, fontSize: 14 }, - chartSwitchWrap: { display: "flex", justifyContent: "flex-end", mb: "16px" }, + chartSwitchWrap: { + display: "flex", + justifyContent: { xs: "center", sm: "flex-end" }, + mb: "16px", + }, chartSwitch: { display: "inline-flex", + width: { xs: "100%", sm: "auto" }, + maxWidth: "100%", border: `1px solid ${tokens.border}`, borderRadius: "999px", background: tokens.surface, @@ -181,16 +187,20 @@ export const boldStyles = ( gap: "2px", }, chartSwitchButton: (active) => ({ + flex: 1, + minWidth: 0, + whiteSpace: "nowrap", + textAlign: "center", border: 0, background: active ? tokens.upSoft : "transparent", fontFamily: "inherit", fontSize: 11, - padding: "8px 18px", + padding: { xs: "8px 6px", sm: "8px 18px" }, cursor: "pointer", color: active ? tokens.up : tokens.textMuted, fontWeight: 700, textTransform: "uppercase", - letterSpacing: "0.12em", + letterSpacing: { xs: "0.04em", sm: "0.12em" }, transition: "background 0.2s, color 0.2s", borderRadius: "999px", "&:hover": { color: active ? tokens.up : tokens.text }, @@ -217,13 +227,21 @@ export const boldStyles = ( }, cardRow: { display: "grid", - gridTemplateColumns: "1fr auto", - alignItems: "center", - gap: "24px", + alignItems: { xs: "start", sm: "center" }, + gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "1fr auto" }, + gridTemplateAreas: { + xs: `"name" "status" "meta"`, + sm: `"name name" "meta status"`, + }, + columnGap: { sm: "24px" }, + rowGap: { xs: "10px", sm: "6px" }, p: "22px 28px", }, - cardLeft: { minWidth: 0 }, + cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", sm: "auto" } }, monitorName: { + gridArea: "name", + minWidth: 0, + width: { xs: "100%", sm: "auto" }, fontWeight: 700, fontSize: 17, letterSpacing: "-0.01em", @@ -233,10 +251,9 @@ export const boldStyles = ( whiteSpace: "nowrap", }, monitorMeta: { - display: "flex", + gridArea: "meta", gap: "10px", - alignItems: "center", - mt: "6px", + alignItems: { xs: "flex-start", sm: "center" }, flexWrap: "wrap", }, pill: { @@ -273,6 +290,8 @@ export const boldStyles = ( }, badge: (tone) => ({ + gridArea: "status", + justifySelf: "start", fontSize: 11, fontWeight: 800, padding: "6px 14px", @@ -296,10 +315,10 @@ export const boldStyles = ( }), heatmap: { - padding: "0 28px 22px", + padding: { xs: "0 12px 18px", sm: "0 28px 22px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: "3px", + gap: { xs: "1px", sm: "3px" }, height: 48, }, heatmapCell: (kind) => ({ @@ -312,10 +331,10 @@ export const boldStyles = ( }), histogram: { - padding: "0 28px", + padding: { xs: "0 12px", sm: "0 28px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: "3px", + gap: { xs: "1px", sm: "3px" }, alignItems: "flex-end", height: 48, }, diff --git a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts index 57128180e..a9b54bf96 100644 --- a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts @@ -90,9 +90,9 @@ export const editorialStyles = ( }, top: { - display: "flex", - alignItems: "flex-end", + alignItems: { xs: "flex-start", sm: "flex-end" }, justifyContent: "space-between", + gap: "12px", mb: "48px", borderBottom: `2px solid ${tokens.text}`, pb: "18px", @@ -149,21 +149,27 @@ export const editorialStyles = ( chartSwitchWrap: { display: "flex", - justifyContent: "flex-end", + justifyContent: { xs: "center", sm: "flex-end" }, mb: "20px", fontFamily: EDITORIAL_SECONDARY_SANS_STACK, }, chartSwitch: { display: "inline-flex", + width: { xs: "100%", sm: "auto" }, + maxWidth: "100%", border: `1px solid ${tokens.text}`, "& > button + button": { borderLeft: `1px solid ${tokens.text}` }, }, chartSwitchButton: (active) => ({ + flex: 1, + minWidth: 0, + whiteSpace: "nowrap", + textAlign: "center", fontFamily: "inherit", fontSize: 10, textTransform: "uppercase", - letterSpacing: "0.2em", - padding: "6px 14px", + letterSpacing: { xs: "0.05em", sm: "0.2em" }, + padding: { xs: "6px 6px", sm: "6px 14px" }, border: 0, background: active ? tokens.text : "transparent", color: active ? tokens.bg : tokens.text, @@ -188,12 +194,20 @@ export const editorialStyles = ( }, cardRow: { display: "grid", - gridTemplateColumns: "1fr auto", - alignItems: "baseline", - gap: "20px", + alignItems: { xs: "start", sm: "baseline" }, + gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "1fr auto" }, + gridTemplateAreas: { + xs: `"name" "status" "meta"`, + sm: `"name name" "meta status"`, + }, + columnGap: { sm: "20px" }, + rowGap: { xs: "10px", sm: "6px" }, }, - cardLeft: { minWidth: 0 }, + cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", sm: "auto" } }, monitorName: { + gridArea: "name", + minWidth: 0, + width: { xs: "100%", sm: "auto" }, fontSize: 20, fontWeight: 700, letterSpacing: "-0.015em", @@ -203,14 +217,13 @@ export const editorialStyles = ( whiteSpace: "nowrap", }, monitorMeta: { + gridArea: "meta", fontFamily: EDITORIAL_SECONDARY_SANS_STACK, fontSize: 12, color: tokens.textMuted, - mt: "6px", - display: "flex", gap: "12px", flexWrap: "wrap", - alignItems: "center", + alignItems: { xs: "flex-start", sm: "center" }, }, pill: { textTransform: "uppercase", @@ -234,6 +247,8 @@ export const editorialStyles = ( }, badge: (tone) => ({ + gridArea: "status", + justifySelf: "start", fontFamily: EDITORIAL_SECONDARY_SANS_STACK, fontSize: 10, fontWeight: 700, @@ -250,7 +265,7 @@ export const editorialStyles = ( mt: "16px", display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: "2px", + gap: { xs: "1px", sm: "2px" }, height: 40, }, heatmapCell: (kind) => ({ @@ -262,7 +277,7 @@ export const editorialStyles = ( mt: "16px", display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: "2px", + gap: { xs: "1px", sm: "2px" }, alignItems: "flex-end", height: 40, }, diff --git a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts index 1ee3af741..e845f4ef3 100644 --- a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts @@ -117,9 +117,9 @@ export const modernStyles = ( }, top: { - display: "flex", - alignItems: "center", + alignItems: { xs: "flex-start", sm: "center" }, justifyContent: "space-between", + gap: "12px", mb: "32px", }, brand: { @@ -198,9 +198,15 @@ export const modernStyles = ( alignItems: "center", }), - chartSwitchWrap: { display: "flex", justifyContent: "flex-end", mb: "14px" }, + chartSwitchWrap: { + display: "flex", + justifyContent: { xs: "center", sm: "flex-end" }, + mb: "14px", + }, chartSwitch: { display: "inline-flex", + width: { xs: "100%", sm: "auto" }, + maxWidth: "100%", border: `1px solid ${tokens.border}`, borderRadius: "999px", background: tokens.surface, @@ -208,16 +214,20 @@ export const modernStyles = ( gap: "2px", }, chartSwitchButton: (active) => ({ + flex: 1, + minWidth: 0, + whiteSpace: "nowrap", + textAlign: "center", border: 0, background: active ? tokens.upSoft : "transparent", fontFamily: "inherit", fontSize: 11, - padding: "6px 16px", + padding: { xs: "6px 6px", sm: "6px 16px" }, cursor: "pointer", color: active ? tokens.up : tokens.textMuted, fontWeight: 600, textTransform: "uppercase", - letterSpacing: "0.08em", + letterSpacing: { xs: "0.04em", sm: "0.08em" }, transition: "background 0.2s, color 0.2s", borderRadius: "999px", "&:hover": { color: active ? tokens.up : tokens.text }, @@ -256,13 +266,21 @@ export const modernStyles = ( }, cardRow: { display: "grid", - gridTemplateColumns: "1fr auto", - alignItems: "center", - gap: "20px", + alignItems: { xs: "start", sm: "center" }, + gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "1fr auto" }, + gridTemplateAreas: { + xs: `"name" "status" "meta"`, + sm: `"name name" "meta status"`, + }, + columnGap: { sm: "20px" }, + rowGap: { xs: "10px", sm: "6px" }, p: "18px 24px", }, - cardLeft: { minWidth: 0 }, + cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", sm: "auto" } }, monitorName: { + gridArea: "name", + minWidth: 0, + width: { xs: "100%", sm: "auto" }, fontWeight: 600, fontSize: 15, letterSpacing: "-0.005em", @@ -272,10 +290,9 @@ export const modernStyles = ( whiteSpace: "nowrap", }, monitorMeta: { - display: "flex", + gridArea: "meta", gap: "10px", - alignItems: "center", - mt: "6px", + alignItems: { xs: "flex-start", sm: "center" }, flexWrap: "wrap", }, pill: { @@ -299,6 +316,8 @@ export const modernStyles = ( }, badge: (tone) => ({ + gridArea: "status", + justifySelf: "start", fontSize: 11, fontWeight: 700, padding: "5px 12px", @@ -319,10 +338,10 @@ export const modernStyles = ( }), heatmap: { - padding: "0 24px 20px", + padding: { xs: "0 12px 16px", sm: "0 24px 20px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: "3px", + gap: { xs: "1px", sm: "3px" }, height: 46, }, heatmapCell: (kind) => ({ @@ -334,10 +353,10 @@ export const modernStyles = ( }), histogram: { - padding: "0 24px", + padding: { xs: "0 12px", sm: "0 24px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: "3px", + gap: { xs: "1px", sm: "3px" }, alignItems: "flex-end", height: 46, }, diff --git a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts index a6a52c021..fd3bfbb83 100644 --- a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts @@ -102,9 +102,9 @@ export const refinedStyles = ( }, top: { - display: "flex", - alignItems: "center", + alignItems: { xs: "flex-start", sm: "center" }, justifyContent: "space-between", + gap: "12px", mb: "28px", }, brand: { @@ -164,9 +164,15 @@ export const refinedStyles = ( alignItems: "center", }), - chartSwitchWrap: { display: "flex", justifyContent: "flex-end", mb: "12px" }, + chartSwitchWrap: { + display: "flex", + justifyContent: { xs: "center", sm: "flex-end" }, + mb: "12px", + }, chartSwitch: { display: "inline-flex", + width: { xs: "100%", sm: "auto" }, + maxWidth: "100%", border: `1px solid ${tokens.border}`, borderRadius: "8px", background: tokens.surface, @@ -174,11 +180,15 @@ export const refinedStyles = ( gap: "2px", }, chartSwitchButton: (active) => ({ + flex: 1, + minWidth: 0, + whiteSpace: "nowrap", + textAlign: "center", border: 0, background: active ? tokens.upSoft : "transparent", fontFamily: "inherit", fontSize: 11, - padding: "5px 14px", + padding: { xs: "5px 6px", sm: "5px 14px" }, cursor: "pointer", color: active ? tokens.up : tokens.textMuted, borderRadius: "5px", @@ -207,13 +217,21 @@ export const refinedStyles = ( }, cardRow: { display: "grid", - gridTemplateColumns: "1fr auto", - alignItems: "center", - gap: "16px", + alignItems: { xs: "start", sm: "center" }, + gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "1fr auto" }, + gridTemplateAreas: { + xs: `"name" "status" "meta"`, + sm: `"name name" "meta status"`, + }, + columnGap: { sm: "16px" }, + rowGap: { xs: "10px", sm: "4px" }, p: "16px 20px", }, - cardLeft: { minWidth: 0 }, + cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", sm: "auto" } }, monitorName: { + gridArea: "name", + minWidth: 0, + width: { xs: "100%", sm: "auto" }, fontWeight: 600, fontSize: 14, letterSpacing: "-0.005em", @@ -223,10 +241,9 @@ export const refinedStyles = ( whiteSpace: "nowrap", }, monitorMeta: { - display: "flex", + gridArea: "meta", gap: "10px", - alignItems: "center", - mt: "4px", + alignItems: { xs: "flex-start", sm: "center" }, flexWrap: "wrap", }, pill: { @@ -251,6 +268,8 @@ export const refinedStyles = ( }, badge: (tone) => ({ + gridArea: "status", + justifySelf: "start", fontSize: 11, fontWeight: 600, padding: "4px 10px", @@ -261,10 +280,10 @@ export const refinedStyles = ( }), heatmap: { - padding: "0 20px 16px", + padding: { xs: "0 10px 14px", sm: "0 20px 16px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: "3px", + gap: { xs: "1px", sm: "3px" }, height: 42, }, heatmapCell: (kind) => ({ @@ -276,10 +295,10 @@ export const refinedStyles = ( }), histogram: { - padding: "0 20px", + padding: { xs: "0 10px", sm: "0 20px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: "3px", + gap: { xs: "1px", sm: "3px" }, alignItems: "flex-end", height: 42, }, diff --git a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx index b19eea0f4..77da86015 100644 --- a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx +++ b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx @@ -102,8 +102,9 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => { return ( - { monitorCount={monitors.length} styles={styles} /> - + { sx={styles.card} > - - {monitor.name} - - - {getMonitorTypeLabel(monitor.type, t)} - - - {uptimePercentage} - - {monitor.url && ( - - {monitor.url} - - )} - - + {monitor.name} {t(statusBadgeKey[monitor.status])} + + + {getMonitorTypeLabel(monitor.type, t)} + + + {uptimePercentage} + + {monitor.url && ( + + {monitor.url} + + )} + {showInfra && ( From c34fcc5cb39bf83d7e4d083314b50b633b373e0b Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Sun, 7 Jun 2026 15:18:22 -0700 Subject: [PATCH 2/3] fix responsiveness for status page themes --- .../StatusPage/Status/themes/bold/styles.ts | 7 +++--- .../Status/themes/editorial/styles.ts | 4 ++-- .../Status/themes/modern/ModernHero.tsx | 22 +++++++++---------- .../StatusPage/Status/themes/modern/styles.ts | 22 ++++++++++++------- .../Status/themes/refined/RefinedHero.tsx | 22 +++++++++---------- .../Status/themes/refined/styles.ts | 20 +++++++++++------ 6 files changed, 55 insertions(+), 42 deletions(-) diff --git a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts index 1fcec973a..073565e4c 100644 --- a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts @@ -130,7 +130,7 @@ export const boldStyles = ( hero: { position: "relative", borderRadius: "22px", - padding: "36px 36px 32px", + padding: { xs: "24px 20px", sm: "36px 36px 32px" }, mb: "28px", background: isDark ? heroBgDark : heroBgLight, border: `1px solid ${tokens.border}`, @@ -149,13 +149,14 @@ export const boldStyles = ( }, heroTitle: { m: 0, - fontSize: 34, + fontSize: { xs: 24, sm: 34 }, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.1, color: tokens.text, display: "flex", - alignItems: "center", + alignItems: { xs: "flex-start", sm: "center" }, + flexWrap: "wrap", gap: "10px", }, heroCheck: (tone) => ({ diff --git a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts index a9b54bf96..8a59d46b4 100644 --- a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts @@ -119,7 +119,7 @@ export const editorialStyles = ( }, statusLine: { - fontSize: 22, + fontSize: { xs: 18, sm: 22 }, fontWeight: 400, m: 0, mb: "8px", @@ -144,7 +144,7 @@ export const editorialStyles = ( letterSpacing: "0.12em", color: tokens.textMuted, m: 0, - mb: "56px", + mb: { xs: "32px", sm: "56px" }, }, chartSwitchWrap: { diff --git a/client/src/Pages/StatusPage/Status/themes/modern/ModernHero.tsx b/client/src/Pages/StatusPage/Status/themes/modern/ModernHero.tsx index a7cf93bc7..68c2b5903 100644 --- a/client/src/Pages/StatusPage/Status/themes/modern/ModernHero.tsx +++ b/client/src/Pages/StatusPage/Status/themes/modern/ModernHero.tsx @@ -11,24 +11,24 @@ export const ModernHero = ({ const { t } = useTranslation(); return ( - - + + {overall.message} - - {t("pages.statusPages.statusBar.monitoringSummary", { - count: monitorCount, - })} - + {overall.icon} + + + {t("pages.statusPages.statusBar.monitoringSummary", { + count: monitorCount, + })} - {overall.icon} ); }; diff --git a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts index e845f4ef3..5535bc8ad 100644 --- a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts @@ -17,7 +17,7 @@ export interface ModernStyles { logoImg: SxProps; hero: SxProps; pulse: (tone: OverallTone) => SxProps; - statusCopy: SxProps; + heroRow: SxProps; heroTitle: SxProps; heroSub: SxProps; heroIcon: (tone: OverallTone) => SxProps; @@ -148,11 +148,11 @@ export const modernStyles = ( hero: { position: "relative", borderRadius: "20px", - padding: "28px 32px", + padding: { xs: "20px", sm: "28px 32px" }, mb: "24px", display: "flex", - alignItems: "center", - gap: "20px", + flexDirection: "column", + gap: "4px", background: tokens.surface, border: `1px solid ${tokens.border}`, boxShadow: cardShadow, @@ -182,20 +182,26 @@ export const modernStyles = ( }, }; }, - statusCopy: { flex: 1, minWidth: 0 }, + heroRow: { + display: "flex", + alignItems: "center", + gap: { xs: "14px", sm: "20px" }, + }, heroTitle: { m: 0, - mb: "4px", - fontSize: 22, + flex: 1, + minWidth: 0, + fontSize: { xs: 18, sm: 22 }, fontWeight: 700, letterSpacing: "-0.02em", color: tokens.text, }, heroSub: { m: 0, color: tokens.textMuted, fontSize: 13 }, heroIcon: (tone) => ({ + display: { xs: "none", sm: "flex" }, color: toneColor(tone, tokens), - display: "flex", alignItems: "center", + flexShrink: 0, }), chartSwitchWrap: { diff --git a/client/src/Pages/StatusPage/Status/themes/refined/RefinedHero.tsx b/client/src/Pages/StatusPage/Status/themes/refined/RefinedHero.tsx index c9a59ad77..b46fdf263 100644 --- a/client/src/Pages/StatusPage/Status/themes/refined/RefinedHero.tsx +++ b/client/src/Pages/StatusPage/Status/themes/refined/RefinedHero.tsx @@ -11,24 +11,24 @@ export const RefinedHero = ({ const { t } = useTranslation(); return ( - - + + {overall.message} - - {t("pages.statusPages.statusBar.monitoringSummary", { - count: monitorCount, - })} - + {overall.icon} + + + {t("pages.statusPages.statusBar.monitoringSummary", { + count: monitorCount, + })} - {overall.icon} ); }; diff --git a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts index fd3bfbb83..dec691a3a 100644 --- a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts @@ -17,7 +17,7 @@ export interface RefinedStyles { company: SxProps; hero: SxProps; statusDot: (tone: OverallTone) => SxProps; - statusCopy: SxProps; + heroRow: SxProps; heroTitle: SxProps; heroSub: SxProps; heroIcon: (tone: OverallTone) => SxProps; @@ -133,10 +133,10 @@ export const refinedStyles = ( background: tokens.surface, border: `1px solid ${tokens.border}`, borderRadius: tokens.radius, - padding: "22px 24px", + padding: { xs: "18px 20px", sm: "22px 24px" }, display: "flex", - alignItems: "center", - gap: "16px", + flexDirection: "column", + gap: "4px", boxShadow: cardShadow, mb: "20px", }, @@ -148,10 +148,15 @@ export const refinedStyles = ( boxShadow: `0 0 0 4px ${toneSoft(tone, tokens)}`, flexShrink: 0, }), - statusCopy: { flex: 1, minWidth: 0 }, + heroRow: { + display: "flex", + alignItems: "center", + gap: { xs: "12px", sm: "16px" }, + }, heroTitle: { m: 0, - mb: "2px", + flex: 1, + minWidth: 0, fontSize: 17, fontWeight: 600, letterSpacing: "-0.01em", @@ -159,9 +164,10 @@ export const refinedStyles = ( }, heroSub: { m: 0, color: tokens.textMuted, fontSize: 13 }, heroIcon: (tone) => ({ + display: { xs: "none", sm: "flex" }, color: toneColor(tone, tokens), - display: "flex", alignItems: "center", + flexShrink: 0, }), chartSwitchWrap: { From 942d75afcdf5c9b8b5a2b8532ef22d4760d48cd1 Mon Sep 17 00:00:00 2001 From: Alex Holliday Date: Sun, 7 Jun 2026 15:21:53 -0700 Subject: [PATCH 3/3] sm -> md --- .../StatusPage/Status/themes/bold/styles.ts | 40 +++++++++--------- .../Status/themes/editorial/styles.ts | 34 +++++++-------- .../StatusPage/Status/themes/modern/styles.ts | 42 +++++++++---------- .../Status/themes/refined/styles.ts | 38 ++++++++--------- .../Status/themes/shared/BaseStatusPage.tsx | 4 +- 5 files changed, 79 insertions(+), 79 deletions(-) diff --git a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts index 073565e4c..c4df4e207 100644 --- a/client/src/Pages/StatusPage/Status/themes/bold/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/bold/styles.ts @@ -99,7 +99,7 @@ export const boldStyles = ( }, top: { - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, justifyContent: "space-between", gap: "12px", mb: "36px", @@ -130,7 +130,7 @@ export const boldStyles = ( hero: { position: "relative", borderRadius: "22px", - padding: { xs: "24px 20px", sm: "36px 36px 32px" }, + padding: { xs: "24px 20px", md: "36px 36px 32px" }, mb: "28px", background: isDark ? heroBgDark : heroBgLight, border: `1px solid ${tokens.border}`, @@ -149,13 +149,13 @@ export const boldStyles = ( }, heroTitle: { m: 0, - fontSize: { xs: 24, sm: 34 }, + fontSize: { xs: 24, md: 34 }, fontWeight: 800, letterSpacing: "-0.02em", lineHeight: 1.1, color: tokens.text, display: "flex", - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, flexWrap: "wrap", gap: "10px", }, @@ -174,12 +174,12 @@ export const boldStyles = ( chartSwitchWrap: { display: "flex", - justifyContent: { xs: "center", sm: "flex-end" }, + justifyContent: { xs: "center", md: "flex-end" }, mb: "16px", }, chartSwitch: { display: "inline-flex", - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, maxWidth: "100%", border: `1px solid ${tokens.border}`, borderRadius: "999px", @@ -196,12 +196,12 @@ export const boldStyles = ( background: active ? tokens.upSoft : "transparent", fontFamily: "inherit", fontSize: 11, - padding: { xs: "8px 6px", sm: "8px 18px" }, + padding: { xs: "8px 6px", md: "8px 18px" }, cursor: "pointer", color: active ? tokens.up : tokens.textMuted, fontWeight: 700, textTransform: "uppercase", - letterSpacing: { xs: "0.04em", sm: "0.12em" }, + letterSpacing: { xs: "0.04em", md: "0.12em" }, transition: "background 0.2s, color 0.2s", borderRadius: "999px", "&:hover": { color: active ? tokens.up : tokens.text }, @@ -228,21 +228,21 @@ export const boldStyles = ( }, cardRow: { display: "grid", - alignItems: { xs: "start", sm: "center" }, - gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "1fr auto" }, + alignItems: { xs: "start", md: "center" }, + gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "1fr auto" }, gridTemplateAreas: { xs: `"name" "status" "meta"`, - sm: `"name name" "meta status"`, + md: `"name name" "meta status"`, }, - columnGap: { sm: "24px" }, - rowGap: { xs: "10px", sm: "6px" }, + columnGap: { md: "24px" }, + rowGap: { xs: "10px", md: "6px" }, p: "22px 28px", }, - cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", sm: "auto" } }, + cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", md: "auto" } }, monitorName: { gridArea: "name", minWidth: 0, - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, fontWeight: 700, fontSize: 17, letterSpacing: "-0.01em", @@ -254,7 +254,7 @@ export const boldStyles = ( monitorMeta: { gridArea: "meta", gap: "10px", - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, flexWrap: "wrap", }, pill: { @@ -316,10 +316,10 @@ export const boldStyles = ( }), heatmap: { - padding: { xs: "0 12px 18px", sm: "0 28px 22px" }, + padding: { xs: "0 12px 18px", md: "0 28px 22px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "3px" }, + gap: { xs: "1px", md: "3px" }, height: 48, }, heatmapCell: (kind) => ({ @@ -332,10 +332,10 @@ export const boldStyles = ( }), histogram: { - padding: { xs: "0 12px", sm: "0 28px" }, + padding: { xs: "0 12px", md: "0 28px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "3px" }, + gap: { xs: "1px", md: "3px" }, alignItems: "flex-end", height: 48, }, diff --git a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts index 8a59d46b4..868ebf186 100644 --- a/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/editorial/styles.ts @@ -90,7 +90,7 @@ export const editorialStyles = ( }, top: { - alignItems: { xs: "flex-start", sm: "flex-end" }, + alignItems: { xs: "flex-start", md: "flex-end" }, justifyContent: "space-between", gap: "12px", mb: "48px", @@ -119,7 +119,7 @@ export const editorialStyles = ( }, statusLine: { - fontSize: { xs: 18, sm: 22 }, + fontSize: { xs: 18, md: 22 }, fontWeight: 400, m: 0, mb: "8px", @@ -144,18 +144,18 @@ export const editorialStyles = ( letterSpacing: "0.12em", color: tokens.textMuted, m: 0, - mb: { xs: "32px", sm: "56px" }, + mb: { xs: "32px", md: "56px" }, }, chartSwitchWrap: { display: "flex", - justifyContent: { xs: "center", sm: "flex-end" }, + justifyContent: { xs: "center", md: "flex-end" }, mb: "20px", fontFamily: EDITORIAL_SECONDARY_SANS_STACK, }, chartSwitch: { display: "inline-flex", - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, maxWidth: "100%", border: `1px solid ${tokens.text}`, "& > button + button": { borderLeft: `1px solid ${tokens.text}` }, @@ -168,8 +168,8 @@ export const editorialStyles = ( fontFamily: "inherit", fontSize: 10, textTransform: "uppercase", - letterSpacing: { xs: "0.05em", sm: "0.2em" }, - padding: { xs: "6px 6px", sm: "6px 14px" }, + letterSpacing: { xs: "0.05em", md: "0.2em" }, + padding: { xs: "6px 6px", md: "6px 14px" }, border: 0, background: active ? tokens.text : "transparent", color: active ? tokens.bg : tokens.text, @@ -194,20 +194,20 @@ export const editorialStyles = ( }, cardRow: { display: "grid", - alignItems: { xs: "start", sm: "baseline" }, - gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "1fr auto" }, + alignItems: { xs: "start", md: "baseline" }, + gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "1fr auto" }, gridTemplateAreas: { xs: `"name" "status" "meta"`, - sm: `"name name" "meta status"`, + md: `"name name" "meta status"`, }, - columnGap: { sm: "20px" }, - rowGap: { xs: "10px", sm: "6px" }, + columnGap: { md: "20px" }, + rowGap: { xs: "10px", md: "6px" }, }, - cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", sm: "auto" } }, + cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", md: "auto" } }, monitorName: { gridArea: "name", minWidth: 0, - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, fontSize: 20, fontWeight: 700, letterSpacing: "-0.015em", @@ -223,7 +223,7 @@ export const editorialStyles = ( color: tokens.textMuted, gap: "12px", flexWrap: "wrap", - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, }, pill: { textTransform: "uppercase", @@ -265,7 +265,7 @@ export const editorialStyles = ( mt: "16px", display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "2px" }, + gap: { xs: "1px", md: "2px" }, height: 40, }, heatmapCell: (kind) => ({ @@ -277,7 +277,7 @@ export const editorialStyles = ( mt: "16px", display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "2px" }, + gap: { xs: "1px", md: "2px" }, alignItems: "flex-end", height: 40, }, diff --git a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts index 5535bc8ad..2f730ee63 100644 --- a/client/src/Pages/StatusPage/Status/themes/modern/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/modern/styles.ts @@ -117,7 +117,7 @@ export const modernStyles = ( }, top: { - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, justifyContent: "space-between", gap: "12px", mb: "32px", @@ -148,7 +148,7 @@ export const modernStyles = ( hero: { position: "relative", borderRadius: "20px", - padding: { xs: "20px", sm: "28px 32px" }, + padding: { xs: "20px", md: "28px 32px" }, mb: "24px", display: "flex", flexDirection: "column", @@ -185,20 +185,20 @@ export const modernStyles = ( heroRow: { display: "flex", alignItems: "center", - gap: { xs: "14px", sm: "20px" }, + gap: { xs: "14px", md: "20px" }, }, heroTitle: { m: 0, flex: 1, minWidth: 0, - fontSize: { xs: 18, sm: 22 }, + fontSize: { xs: 18, md: 22 }, fontWeight: 700, letterSpacing: "-0.02em", color: tokens.text, }, heroSub: { m: 0, color: tokens.textMuted, fontSize: 13 }, heroIcon: (tone) => ({ - display: { xs: "none", sm: "flex" }, + display: { xs: "none", md: "flex" }, color: toneColor(tone, tokens), alignItems: "center", flexShrink: 0, @@ -206,12 +206,12 @@ export const modernStyles = ( chartSwitchWrap: { display: "flex", - justifyContent: { xs: "center", sm: "flex-end" }, + justifyContent: { xs: "center", md: "flex-end" }, mb: "14px", }, chartSwitch: { display: "inline-flex", - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, maxWidth: "100%", border: `1px solid ${tokens.border}`, borderRadius: "999px", @@ -228,12 +228,12 @@ export const modernStyles = ( background: active ? tokens.upSoft : "transparent", fontFamily: "inherit", fontSize: 11, - padding: { xs: "6px 6px", sm: "6px 16px" }, + padding: { xs: "6px 6px", md: "6px 16px" }, cursor: "pointer", color: active ? tokens.up : tokens.textMuted, fontWeight: 600, textTransform: "uppercase", - letterSpacing: { xs: "0.04em", sm: "0.08em" }, + letterSpacing: { xs: "0.04em", md: "0.08em" }, transition: "background 0.2s, color 0.2s", borderRadius: "999px", "&:hover": { color: active ? tokens.up : tokens.text }, @@ -272,21 +272,21 @@ export const modernStyles = ( }, cardRow: { display: "grid", - alignItems: { xs: "start", sm: "center" }, - gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "1fr auto" }, + alignItems: { xs: "start", md: "center" }, + gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "1fr auto" }, gridTemplateAreas: { xs: `"name" "status" "meta"`, - sm: `"name name" "meta status"`, + md: `"name name" "meta status"`, }, - columnGap: { sm: "20px" }, - rowGap: { xs: "10px", sm: "6px" }, + columnGap: { md: "20px" }, + rowGap: { xs: "10px", md: "6px" }, p: "18px 24px", }, - cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", sm: "auto" } }, + cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", md: "auto" } }, monitorName: { gridArea: "name", minWidth: 0, - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, fontWeight: 600, fontSize: 15, letterSpacing: "-0.005em", @@ -298,7 +298,7 @@ export const modernStyles = ( monitorMeta: { gridArea: "meta", gap: "10px", - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, flexWrap: "wrap", }, pill: { @@ -344,10 +344,10 @@ export const modernStyles = ( }), heatmap: { - padding: { xs: "0 12px 16px", sm: "0 24px 20px" }, + padding: { xs: "0 12px 16px", md: "0 24px 20px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "3px" }, + gap: { xs: "1px", md: "3px" }, height: 46, }, heatmapCell: (kind) => ({ @@ -359,10 +359,10 @@ export const modernStyles = ( }), histogram: { - padding: { xs: "0 12px", sm: "0 24px" }, + padding: { xs: "0 12px", md: "0 24px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "3px" }, + gap: { xs: "1px", md: "3px" }, alignItems: "flex-end", height: 46, }, diff --git a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts index dec691a3a..0cf754af6 100644 --- a/client/src/Pages/StatusPage/Status/themes/refined/styles.ts +++ b/client/src/Pages/StatusPage/Status/themes/refined/styles.ts @@ -102,7 +102,7 @@ export const refinedStyles = ( }, top: { - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, justifyContent: "space-between", gap: "12px", mb: "28px", @@ -133,7 +133,7 @@ export const refinedStyles = ( background: tokens.surface, border: `1px solid ${tokens.border}`, borderRadius: tokens.radius, - padding: { xs: "18px 20px", sm: "22px 24px" }, + padding: { xs: "18px 20px", md: "22px 24px" }, display: "flex", flexDirection: "column", gap: "4px", @@ -151,7 +151,7 @@ export const refinedStyles = ( heroRow: { display: "flex", alignItems: "center", - gap: { xs: "12px", sm: "16px" }, + gap: { xs: "12px", md: "16px" }, }, heroTitle: { m: 0, @@ -164,7 +164,7 @@ export const refinedStyles = ( }, heroSub: { m: 0, color: tokens.textMuted, fontSize: 13 }, heroIcon: (tone) => ({ - display: { xs: "none", sm: "flex" }, + display: { xs: "none", md: "flex" }, color: toneColor(tone, tokens), alignItems: "center", flexShrink: 0, @@ -172,12 +172,12 @@ export const refinedStyles = ( chartSwitchWrap: { display: "flex", - justifyContent: { xs: "center", sm: "flex-end" }, + justifyContent: { xs: "center", md: "flex-end" }, mb: "12px", }, chartSwitch: { display: "inline-flex", - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, maxWidth: "100%", border: `1px solid ${tokens.border}`, borderRadius: "8px", @@ -194,7 +194,7 @@ export const refinedStyles = ( background: active ? tokens.upSoft : "transparent", fontFamily: "inherit", fontSize: 11, - padding: { xs: "5px 6px", sm: "5px 14px" }, + padding: { xs: "5px 6px", md: "5px 14px" }, cursor: "pointer", color: active ? tokens.up : tokens.textMuted, borderRadius: "5px", @@ -223,21 +223,21 @@ export const refinedStyles = ( }, cardRow: { display: "grid", - alignItems: { xs: "start", sm: "center" }, - gridTemplateColumns: { xs: "minmax(0, 1fr)", sm: "1fr auto" }, + alignItems: { xs: "start", md: "center" }, + gridTemplateColumns: { xs: "minmax(0, 1fr)", md: "1fr auto" }, gridTemplateAreas: { xs: `"name" "status" "meta"`, - sm: `"name name" "meta status"`, + md: `"name name" "meta status"`, }, - columnGap: { sm: "16px" }, - rowGap: { xs: "10px", sm: "4px" }, + columnGap: { md: "16px" }, + rowGap: { xs: "10px", md: "4px" }, p: "16px 20px", }, - cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", sm: "auto" } }, + cardLeft: { minWidth: 0, flex: 1, width: { xs: "100%", md: "auto" } }, monitorName: { gridArea: "name", minWidth: 0, - width: { xs: "100%", sm: "auto" }, + width: { xs: "100%", md: "auto" }, fontWeight: 600, fontSize: 14, letterSpacing: "-0.005em", @@ -249,7 +249,7 @@ export const refinedStyles = ( monitorMeta: { gridArea: "meta", gap: "10px", - alignItems: { xs: "flex-start", sm: "center" }, + alignItems: { xs: "flex-start", md: "center" }, flexWrap: "wrap", }, pill: { @@ -286,10 +286,10 @@ export const refinedStyles = ( }), heatmap: { - padding: { xs: "0 10px 14px", sm: "0 20px 16px" }, + padding: { xs: "0 10px 14px", md: "0 20px 16px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "3px" }, + gap: { xs: "1px", md: "3px" }, height: 42, }, heatmapCell: (kind) => ({ @@ -301,10 +301,10 @@ export const refinedStyles = ( }), histogram: { - padding: { xs: "0 10px", sm: "0 20px" }, + padding: { xs: "0 10px", md: "0 20px" }, display: "grid", gridTemplateColumns: `repeat(${MAX_RECENT_CHECKS}, 1fr)`, - gap: { xs: "1px", sm: "3px" }, + gap: { xs: "1px", md: "3px" }, alignItems: "flex-end", height: 42, }, diff --git a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx index 77da86015..a6214567d 100644 --- a/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx +++ b/client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx @@ -104,7 +104,7 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => { { {t(statusBadgeKey[monitor.status])}