From 6db0aff0735a7f493369fac53c30c40607441678 Mon Sep 17 00:00:00 2001
From: karenvicent <karenvergara@msn.com>
Date: Thu, 26 Jun 2025 14:37:35 -0400
Subject: [PATCH] fix: replace breakpoints with theme.spacing for consistent
 layout sizing

---
 client/src/Components/Fallback/index.jsx | 12 ++++--------
 1 file changed, 4 insertions(+), 8 deletions(-)

diff --git a/client/src/Components/Fallback/index.jsx b/client/src/Components/Fallback/index.jsx
index 27879c42b..919f2fd9e 100644
--- a/client/src/Components/Fallback/index.jsx
+++ b/client/src/Components/Fallback/index.jsx
@@ -87,21 +87,17 @@ const Fallback = ({
 				sx={{
 					display: "flex",
 					borderStyle: "dashed",
-					height: "60vh",
-					width: "45%",
+					height: { sm: "50vh", md: "60vh" },
+					width: { md: "45%", lg: "40%" },
 					minWidth: theme.spacing(200),
-					maxHeight: theme.breakpoints.values.sm,
-					maxWidth: theme.breakpoints.values.md,
+					maxHeight: theme.spacing(350),
+					maxWidth: theme.spacing(450),
 				}}
 			>
 				<Stack
 					className={`fallback__${title?.trim().split(" ")[0]}`}
 					alignItems="center"
 					gap={theme.spacing(20)}
-					sx={{
-						maxHeight: "70vh",
-						justifyContent: "center",
-					}}
 				>
 					{mode === "light" ? (
 						<Skeleton style={{ zIndex: 1 }} />