Merge pull request #1789 from bluewave-labs/fix/fe/maintenance-background

Fix Maintenance page layout issue

src/Pages/Maintenance/index.jsx

@@ -42,66 +42,52 @@ const Maintenance = () => {
 		fetchMaintenanceWindows();
 	}, [page, rowsPerPage, updateTrigger]);
 
+	if (maintenanceWindows.length === 0) {
+		return (
+			<Fallback
+				title="maintenance window"
+				checks={[
+					"Mark your maintenance periods",
+					"Eliminate any misunderstandings",
+					"Stop sending alerts in maintenance windows",
+				]}
+				link="/maintenance/create"
+				isAdmin={isAdmin}
+			/>
+		);
+	}
+
 	return (
-		<Box
-			className="maintenance table-container"
-			sx={{
-				':has(> [class*="fallback__"])': {
-					position: "relative",
-					border: 1,
-					borderColor: theme.palette.primary.lowContrast,
-					borderRadius: theme.shape.borderRadius,
-					borderStyle: "dashed",
-					backgroundColor: theme.palette.primary.main,
-					overflow: "hidden",
-				},
-			}}
-		>
-			{maintenanceWindows.length > 0 && (
-				<Stack gap={theme.spacing(8)}>
-					<Stack
-						direction="row"
-						justifyContent="space-between"
-						alignItems="center"
-						mt={theme.spacing(5)}
-					>
-						<Breadcrumbs list={[{ name: "maintenance", path: "/maintenance" }]} />
-						<Button
-							variant="contained"
-							color="accent"
-							onClick={() => {
-								navigate("/maintenance/create");
-							}}
-							sx={{ fontWeight: 500 }}
-						>
-							Create maintenance window
-						</Button>
-					</Stack>
-					<MaintenanceTable
-						page={page}
-						setPage={setPage}
-						rowsPerPage={rowsPerPage}
-						sort={sort}
-						setSort={setSort}
-						maintenanceWindows={maintenanceWindows}
-						maintenanceWindowCount={maintenanceWindowCount}
-						updateCallback={handleActionMenuDelete}
-					/>
-				</Stack>
-			)}
-			{maintenanceWindows.length === 0 && (
-				<Fallback
-					title="maintenance window"
-					checks={[
-						"Mark your maintenance periods",
-						"Eliminate any misunderstandings",
-						"Stop sending alerts in maintenance windows",
-					]}
-					link="/maintenance/create"
-					isAdmin={isAdmin}
-				/>
-			)}
-		</Box>
+		<Stack gap={theme.spacing(10)}>
+			<Stack
+				direction="row"
+				justifyContent="space-between"
+				alignItems="center"
+				mt={theme.spacing(5)}
+			>
+				<Breadcrumbs list={[{ name: "maintenance", path: "/maintenance" }]} />
+				<Button
+					variant="contained"
+					color="accent"
+					onClick={() => {
+						navigate("/maintenance/create");
+					}}
+					sx={{ fontWeight: 500 }}
+				>
+					Create maintenance window
+				</Button>
+			</Stack>
+			<MaintenanceTable
+				page={page}
+				setPage={setPage}
+				rowsPerPage={rowsPerPage}
+				sort={sort}
+				setSort={setSort}
+				maintenanceWindows={maintenanceWindows}
+				maintenanceWindowCount={maintenanceWindowCount}
+				updateCallback={handleActionMenuDelete}
+			/>
+		</Stack>
 	);
 };