From f2d2687d2a43779ef276fa3d44d5f358f14cff74 Mon Sep 17 00:00:00 2001
From: Alex Holliday <ajhollid@gmail.com>
Date: Tue, 3 Feb 2026 22:58:09 +0000
Subject: [PATCH] responsive

---
 .../Pages/StatusPage/Status/Components/MonitorsList.tsx    | 4 ++--
 client/src/Pages/StatusPage/Status/index.tsx               | 7 ++++---
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx b/client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx
index fc12704a9..04060673a 100644
--- a/client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx
+++ b/client/src/Pages/StatusPage/Status/Components/MonitorsList.tsx
@@ -96,8 +96,8 @@ export const MonitorsList = ({ statusPage, monitors }: MonitorsListProps) => {
 							<Box sx={{ overflow: "hidden", minWidth: 0, flex: 1 }}>
 								{chartType === "histogram" ? (
 									<HistogramResponseTime
-										height={100}
-										gap={theme.spacing(5)}
+										height={{ xs: 50, md: 100 }}
+										gap={{ xs: theme.spacing(0.5), md: theme.spacing(5) }}
 										checks={monitor?.checks?.slice().reverse() ?? []}
 									/>
 								) : (
diff --git a/client/src/Pages/StatusPage/Status/index.tsx b/client/src/Pages/StatusPage/Status/index.tsx
index 78bee43c2..1b509507e 100644
--- a/client/src/Pages/StatusPage/Status/index.tsx
+++ b/client/src/Pages/StatusPage/Status/index.tsx
@@ -6,7 +6,7 @@ import { Link } from "react-router-dom";
 import Stack from "@mui/material/Stack";
 import Box from "@mui/material/Box";
 
-import { useTheme } from "@mui/material";
+import { useMediaQuery, useTheme } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useIsAdmin } from "@/Hooks/useIsAdmin";
 import { useLocation, useParams } from "react-router-dom";
@@ -20,6 +20,7 @@ const StatusPageView = () => {
 	const { url } = useParams();
 	const isAdmin = useIsAdmin();
 	const location = useLocation();
+	const isSmall = useMediaQuery(theme.breakpoints.down("md"));
 	const isPublic = location.pathname.startsWith("/status/public");
 
 	const apiUrl = url ? `/status-page/${url}?type=uptime` : null;
@@ -61,8 +62,8 @@ const StatusPageView = () => {
 	let sx: React.CSSProperties = {};
 	if (isPublic) {
 		sx.paddingTop = theme.spacing(20);
-		sx.paddingLeft = "20vw";
-		sx.paddingRight = "20vw";
+		sx.paddingLeft = isSmall ? "5vw" : "20vw";
+		sx.paddingRight = isSmall ? "5vw" : "20vw";
 	}
 
 	const logoSrc = statusPage.logo?.data