Responsive

client/src/Components/v2/common/controls/HeaderTimeRange.tsx

@@ -1,10 +1,11 @@
 import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
 import { ToggleButtonGroup, ToggleButton } from "@/Components/v2/inputs";
 import { useTheme } from "@mui/material/styles";
 import CircularProgress from "@mui/material/CircularProgress";
 import { useTranslation } from "react-i18next";
-import Box from "@mui/material/Box";
+import { useMediaQuery } from "@mui/material";
 
 interface MonitorTimeFrameHeaderProps {
 	isLoading?: boolean;
@@ -21,6 +22,7 @@ export const HeaderTimeRange = ({
 }: MonitorTimeFrameHeaderProps) => {
 	const theme = useTheme();
 	const { t } = useTranslation();
+	const isSmallScreen = useMediaQuery(theme.breakpoints.down("md"));
 	const handleChange = (
 		_event: React.MouseEvent<HTMLElement>,
 		newValue: string | null
@@ -35,10 +37,12 @@ export const HeaderTimeRange = ({
 	if (hasDateRange) {
 		timeFramePicker = (
 			<ToggleButtonGroup
+				orientation={isSmallScreen ? "vertical" : "horizontal"}
 				value={dateRange}
 				exclusive
 				onChange={handleChange}
 				size="small"
+				fullWidth={isSmallScreen}
 			>
 				<ToggleButton value="recent">
 					{t("components.headerTimeRange.labels.recent")}
@@ -58,12 +62,17 @@ export const HeaderTimeRange = ({
 
 	return (
 		<Stack
-			direction="row"
+			direction={{ xs: "column", sm: "row" }}
 			justifyContent="flex-end"
 			alignItems="center"
 			gap={theme.spacing(4)}
 		>
-			{isLoading && <CircularProgress size={16} />}
+			<Box
+				width={16}
+				height={16}
+			>
+				{isLoading && <CircularProgress size={16} />}
+			</Box>
 			<Typography variant="body2">
 				{t(`components.headerTimeRange.description.${dateRange}`)}
 			</Typography>

client/src/Pages/Checks/index.tsx

@@ -1,4 +1,5 @@
 import Stack from "@mui/material/Stack";
+import Box from "@mui/material/Box";
 import {
 	BasePage,
 	TotalChecksBox,
@@ -9,7 +10,7 @@ import { HeaderTimeRange } from "@/Components/v2/common";
 import { Select } from "@/Components/v2/inputs";
 import { ChecksTable } from "./Components/ChecksTable";
 
-import { MenuItem, useTheme } from "@mui/material";
+import { MenuItem } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import { useState, useMemo } from "react";
 import { useParams } from "react-router-dom";
@@ -115,15 +116,16 @@ const Checks = () => {
 
 			<Stack
 				direction={{ xs: "column", md: "row" }}
-				justifyContent={"space-between"}
-				alignItems={"center"}
+				justifyContent="space-between"
+				alignItems={{ xs: "stretch", md: "center" }}
 				gap={2}
 			>
 				<Stack
-					direction={{ xs: "column", md: "row" }}
 					gap={2}
+					direction={{ xs: "column", md: "row" }}
 				>
 					<Select
+						fullWidth
 						value={selectedMonitor}
 						onChange={(e: any) => {
 							setSelectedMonitor(e.target.value);