add a flex basis prop instead of one-off fix

client/src/Components/design-elements/BaseChart.tsx

@@ -12,6 +12,7 @@ type BaseChartProps = React.PropsWithChildren<{
 	title: string;
 	width?: number | string;
 	maxWidth?: number | string;
+	flexBasis?: number | string;
 	padding?: number | string | ResponsiveStyleValue<number | string>;
 	onClick?: () => void;
 }>;
@@ -21,6 +22,7 @@ export const BaseChart = ({
 	title,
 	width = "100%",
 	maxWidth = "100%",
+	flexBasis = "0%",
 	padding,
 	onClick,
 }: BaseChartProps) => {
@@ -32,6 +34,7 @@ export const BaseChart = ({
 				padding: padding ?? theme.spacing(LAYOUT.MD),
 				display: "flex",
 				flex: 1,
+				flexBasis,
 				width: width,
 				maxWidth: maxWidth,
 				...(onClick && {

client/src/Components/design-elements/Gauge.tsx

@@ -123,6 +123,7 @@ export const DetailGauge = ({
 	lowerLabel,
 	lowerValue,
 	maxWidth = 225,
+	flexBasis = "0%",
 }: {
 	title: string;
 	progress: number;
@@ -131,6 +132,7 @@ export const DetailGauge = ({
 	lowerLabel?: string;
 	lowerValue?: string | number;
 	maxWidth?: number;
+	flexBasis?: number | string;
 }) => {
 	const theme = useTheme();
 	return (
@@ -138,6 +140,7 @@ export const DetailGauge = ({
 			icon={null}
 			title={title}
 			maxWidth={maxWidth}
+			flexBasis={flexBasis}
 		>
 			<Stack
 				alignItems={"center"}

client/src/Pages/Infrastructure/Details/Components/Gauges.tsx

@@ -8,7 +8,6 @@ import { useTheme } from "@mui/material";
 import useMediaQuery from "@mui/material/useMediaQuery";
 import type { CheckSnapshot } from "@/Types/Check";
 
-// Width each gauge card aims for, and the basis the wrapping row breaks on.
 const GAUGE_MAX_WIDTH = 260;
 
 export const InfraDetailsGauges = ({
@@ -31,13 +30,6 @@ export const InfraDetailsGauges = ({
 			alignItems={"stretch"}
 			flexWrap={"wrap"}
 			useFlexGap
-			sx={{
-				// The gauge cards are flex: 1 1 0, so a wrapping row would never
-				// overflow and they would squash to min-content instead of breaking
-				// the line. Give each one its own width as the basis so the row wraps
-				// at the intended card size.
-				"& > *": { flexBasis: GAUGE_MAX_WIDTH },
-			}}
 		>
 			<DetailGauge
 				title={t("pages.infrastructure.gauges.memory.title")}
@@ -47,6 +39,7 @@ export const InfraDetailsGauges = ({
 				upperValue={prettyBytes(snapshot?.memory?.used_bytes || 0)}
 				lowerLabel={t("pages.infrastructure.gauges.memory.lowerLabel")}
 				lowerValue={prettyBytes(snapshot?.memory?.total_bytes || 0)}
+				flexBasis={isSmall ? "auto" : GAUGE_MAX_WIDTH}
 			/>
 			<DetailGauge
 				title={t("pages.infrastructure.gauges.cpu.title")}