responsive

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() ?? []}
 									/>
 								) : (

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