Merge pull request #2663 from bluewave-labs/feat/fe/infrastructure-disk-ui-overflow

Fix: Infrastructure disks overflow

client/src/Pages/Infrastructure/Details/Components/GaugeBoxes/index.jsx

@@ -2,18 +2,19 @@
 import { Stack } from "@mui/material";
 import Gauge from "./Gauge";
 import SkeletonLayout from "./skeleton";
+import PropTypes from "prop-types";
 
 // Utils
 import { useHardwareUtils } from "../../Hooks/useHardwareUtils";
 import { useTheme } from "@emotion/react";
 import { useTranslation } from "react-i18next";
 
-const Gauges = ({ shouldRender, monitor }) => {
+const Gauges = ({ isLoading = false, monitor }) => {
 	const { decimalToPercentage, formatBytes } = useHardwareUtils();
 	const theme = useTheme();
 	const { t } = useTranslation();
 
-	if (!shouldRender) {
+	if (isLoading) {
 		return <SkeletonLayout />;
 	}
 
@@ -60,6 +61,7 @@ const Gauges = ({ shouldRender, monitor }) => {
 	return (
 		<Stack
 			direction="row"
+			flexWrap="wrap"
 			gap={theme.spacing(8)}
 		>
 			{gauges.map((gauge) => {
@@ -79,4 +81,9 @@ const Gauges = ({ shouldRender, monitor }) => {
 	);
 };
 
+Gauges.propTypes = {
+	isLoading: PropTypes.bool,
+	monitor: PropTypes.object,
+};
+
 export default Gauges;

client/src/Pages/Infrastructure/Details/index.jsx

@@ -92,11 +92,11 @@ const InfrastructureDetails = () => {
 				monitor={monitor}
 			/>
 			<GaugeBoxes
-				shouldRender={!isLoading}
+				isLoading={isLoading}
 				monitor={monitor}
 			/>
 			<MonitorTimeFrameHeader
-				shouldRender={!isLoading}
+				isLoading={isLoading}
 				dateRange={dateRange}
 				setDateRange={setDateRange}
 			/>