style(fix): properly set dashboard layout border and shadow

Author: elboletaire

src/components/Layout/Dashboard.tsx

@@ -12,5 +12,12 @@ export const DashboardBox = (props: BoxProps) => (
 )
 
 export const DashboardContents = (props: BoxProps) => (
-  <DashboardBox borderRadius='lg' height='100%' py={{ base: 4, lg: 10 }} px={{ base: 4, lg: 10 }} {...props} />
+  <DashboardBox
+    boxShadow='0 0 0 1px rgba(56,60,67,.05),0 1px 3px 0 rgba(56,60,67,.15)'
+    borderRadius='20px'
+    height='100%'
+    py={{ base: 4, lg: 10 }}
+    px={{ base: 4, lg: 10 }}
+    {...props}
+  />
 )

src/elements/LayoutDashboard.tsx

@@ -70,14 +70,7 @@ const LayoutDashboard: React.FC = () => {
         <DashboardMenu isOpen={isOpen} onClose={onClose} />
 
         {/* Main Content */}
-        <Box
-          gridArea='main'
-          mr={{ base: 0, xl: 6 }}
-          mb={4}
-          minW={0}
-          boxShadow='0 0 0 1px rgba(56,60,67,.05),0 1px 3px 0 rgba(56,60,67,.15)'
-          borderRadius='20px'
-        >
+        <Box gridArea='main' mr={{ base: 0, xl: 6 }} mb={4} minW={0}>
           <Outlet context={{ setTitle, setBack } satisfies DashboardLayoutContext} />
         </Box>
       </Grid>