fix status page styling

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,
 		},

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,
 		},

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,
 		},

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,
 		},

client/src/Pages/StatusPage/Status/themes/shared/BaseStatusPage.tsx

@@ -102,8 +102,9 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
 
 	return (
 		<Box sx={styles.page}>
-			<Box
+			<Stack
 				component="header"
+				direction={{ xs: "column", sm: "row" }}
 				sx={styles.top}
 			>
 				<HeaderSlot
@@ -113,7 +114,7 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
 					monitorCount={monitors.length}
 					styles={styles}
 				/>
-			</Box>
+			</Stack>
 
 			<HeroSlot
 				statusPage={statusPage}
@@ -171,38 +172,39 @@ export const BaseStatusPage = ({ statusPage, monitors, config }: Props) => {
 							sx={styles.card}
 						>
 							<Box sx={styles.cardRow}>
-								<Box sx={styles.cardLeft}>
-									<Box sx={styles.monitorName}>{monitor.name}</Box>
-									<Box sx={styles.monitorMeta}>
-										<Box
-											component="span"
-											sx={isHardware ? styles.pillHardware : styles.pill}
-										>
-											{getMonitorTypeLabel(monitor.type, t)}
-										</Box>
-										<Box
-											component="span"
-											sx={styles.pill}
-										>
-											{uptimePercentage}
-										</Box>
-										{monitor.url && (
-											<Box
-												component="span"
-												sx={styles.monitorUrl}
-												title={monitor.url}
-											>
-												{monitor.url}
-											</Box>
-										)}
-									</Box>
-								</Box>
+								<Box sx={styles.monitorName}>{monitor.name}</Box>
 								<Box
 									component="span"
 									sx={styles.badge(badgeTone)}
 								>
 									{t(statusBadgeKey[monitor.status])}
 								</Box>
+								<Stack
+									direction={{ xs: "column", sm: "row" }}
+									sx={styles.monitorMeta}
+								>
+									<Box
+										component="span"
+										sx={isHardware ? styles.pillHardware : styles.pill}
+									>
+										{getMonitorTypeLabel(monitor.type, t)}
+									</Box>
+									<Box
+										component="span"
+										sx={{ ...styles.pill }}
+									>
+										{uptimePercentage}
+									</Box>
+									{monitor.url && (
+										<Box
+											component="span"
+											sx={styles.monitorUrl}
+											title={monitor.url}
+										>
+											{monitor.url}
+										</Box>
+									)}
+								</Stack>
 							</Box>
 
 							{showInfra && (