status box fix

client/package-lock.json

@@ -2472,11 +2472,13 @@
 			}
 		},
 		"node_modules/axios": {
-			"version": "1.13.4",
+			"version": "1.13.5",
+			"resolved": "https://registry.npmjs.org/axios/-/axios-1.13.5.tgz",
+			"integrity": "sha512-cz4ur7Vb0xS4/KUN0tPWe44eqxrIu31me+fbang3ijiNscE129POzipJJA6zniq2C/Z6sJCjMimjS8Lc/GAs8Q==",
 			"license": "MIT",
 			"dependencies": {
-				"follow-redirects": "^1.15.6",
-				"form-data": "^4.0.4",
+				"follow-redirects": "^1.15.11",
+				"form-data": "^4.0.5",
 				"proxy-from-env": "^1.1.0"
 			}
 		},

client/src/Components/v2/design-elements/StatusBox.tsx

@@ -2,7 +2,6 @@ import Stack from "@mui/material/Stack";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
 import { BaseBox } from "@/Components/v2/design-elements";
-import Background from "@/assets/Images/background-grid.svg?react";
 import { useTranslation } from "react-i18next";
 import type { SxProps } from "@mui/material";
 
@@ -18,6 +17,7 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => {
 	return (
 		<BaseBox
 			sx={{
+				backgroundColor: theme.palette.background.default,
 				overflow: "hidden",
 				position: "relative",
 				flex: 1,
@@ -27,11 +27,23 @@ export const BGBox = ({ children, sx }: StatusBoxProps) => {
 		>
 			<Box
 				position="absolute"
-				top="-10%"
-				left="5%"
-			>
-				<Background />
-			</Box>
+				top={0}
+				left={0}
+				right={0}
+				bottom={0}
+				sx={{
+					pointerEvents: "none",
+					backgroundImage: `
+						linear-gradient(${theme.palette.divider} 1px, transparent 1px),
+						linear-gradient(90deg, ${theme.palette.divider} 1px, transparent 1px)
+					`,
+					backgroundSize: "24px 24px",
+					maskImage:
+						"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.4) 100%)",
+					WebkitMaskImage:
+						"linear-gradient(135deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0.4) 100%)",
+				}}
+			/>
 			{children}
 		</BaseBox>
 	);