Fix: Infrastructure disks overflow

client/src/Components/LanguageSelector.jsx

@@ -6,7 +6,6 @@ import { useSelector } from "react-redux";
 import { useDispatch } from "react-redux";
 import { setLanguage } from "../Features/UI/uiSlice";
 
-
 const langMap = {
 	cs: "cz",
 	ja: "jp",

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}
 			/>

server/validation/joi.js

@@ -164,11 +164,7 @@ const createMonitorBodyValidation = joi.object({
 		.custom((value, helpers) => {
 			// 1. Standard URLs: must have protocol and pass canParse()
 			if (/^(https?:\/\/)/.test(value)) {
-				if (
-					typeof URL !== "undefined" &&
-					typeof URL.canParse === "function" &&
-					URL.canParse(value)
-				) {
+				if (typeof URL !== "undefined" && typeof URL.canParse === "function" && URL.canParse(value)) {
 					return value;
 				}
 				// else, it's a malformed URL with protocol
@@ -197,8 +193,7 @@ const createMonitorBodyValidation = joi.object({
 		.messages({
 			"string.empty": "This field is required.",
 			"string.uri": "The URL you provided is not valid.",
-			"string.invalidUrl":
-				"Please enter a valid URL, hostname, or container name (with optional port).",
+			"string.invalidUrl": "Please enter a valid URL, hostname, or container name (with optional port).",
 		}),
 	ignoreTlsErrors: joi.boolean().default(false),
 	port: joi.number(),