fix: center and constrain empty placeholder layout

client/src/Components/Fallback/index.css

@@ -1,19 +1,22 @@
 [class*="fallback__"] {
 	width: fit-content;
 	margin: auto;
-	margin-top: 100px;
 }
+
 [class*="fallback__"] h1.MuiTypography-root {
 	font-size: var(--env-var-font-size-large);
 	font-weight: 600;
 }
+
 [class*="fallback__"] button.MuiButtonBase-root,
 [class*="fallback__"] .check {
 	width: max-content;
 }
+
 [class*="fallback__"] button.MuiButtonBase-root {
 	min-height: 34px;
 }
+
 [class*="fallback__"] .check span.MuiTypography-root,
 [class*="fallback__"] button.MuiButtonBase-root {
 	font-size: var(--env-var-font-size-medium);
@@ -35,6 +38,7 @@
 	background-size: cover;
 	background-repeat: no-repeat;
 }
-.fallback__status > .MuiStack-root {
+
+.fallback__status>.MuiStack-root {
 	margin-left: var(--env-var-spacing-2);
-}
+}

client/src/Components/Fallback/index.jsx

@@ -67,24 +67,43 @@ const Fallback = ({
 			</>
 		);
 	};
-
 	return (
 		<Box
-			position="relative"
+		position="relative"
+		sx={{
+			height: "100vh",
+			width: "100%",
+			display: "flex",
+			justifyContent: "center",
+			alignItems: "center",
+		}}>
+			<Box
+			
 			border={1}
 			borderColor={theme.palette.primary.lowContrast}
 			borderRadius={theme.shape.borderRadius}
 			backgroundColor={theme.palette.primary.main}
 			overflow="hidden"
 			sx={{
+				display: "flex",
 				borderStyle: "dashed",
-				minHeight: "calc(100vh - var(--env-var-spacing-2) * 2)",
+				height: "60vh",
+				width: "45%",
+				minWidth: "400px",
+				maxHeight:"700px",
+				maxWidth: "800px", 
 			}}
 		>
 			<Stack
 				className={`fallback__${title?.trim().split(" ")[0]}`}
 				alignItems="center"
 				gap={theme.spacing(20)}
+				sx={{
+				maxHeight:"70vh",
+				justifyContent:"center"
+
+			
+			}}
 			>
 				{mode === "light" ? (
 					<Skeleton style={{ zIndex: 1 }} />
@@ -127,7 +146,8 @@ const Fallback = ({
 						<Button
 							variant="contained"
 							color="accent"
-							sx={{ alignSelf: "center" }}
+							sx={{ alignSelf: "center"
+						}}
 							onClick={() => navigate(link)}
 						>
 							Let's create your first {title}
@@ -174,6 +194,7 @@ const Fallback = ({
 					</>
 				)}
 			</Stack>
+		</Box>	
 		</Box>
 	);
 };