fix: edge to edge screen

clashperk · Oct 27, 2024 · 8235afe · 8235afe
1 parent 873f219
commit 8235afe
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 45 deletions.
diff --git a/app/web/components/Loader.tsx b/app/web/components/Loader.tsx
@@ -1,7 +1,7 @@
 import Paper from '@mui/material/Paper';
 import Skeleton from '@mui/material/Skeleton';
 import Typography from '@mui/material/Typography';
-import { Container, Stack } from '@mui/system';
+import { Stack } from '@mui/system';
 
 export const Loader = ({
   loading,
@@ -11,49 +11,47 @@ export const Loader = ({
   message?: string;
 }) => {
   return (
-    <Container maxWidth="sm">
-      <Paper
-        variant="outlined"
-        sx={{
-          mx: { md: 5 },
-          padding: 2,
-          minHeight: '100vh',
-          flexShrink: 0,
-          background: '#2F3136',
-          borderRadius: '4px 4px 4px 4px'
-          // borderLeft: "4px solid #5865f2",
-        }}
+    <Paper
+      variant="outlined"
+      sx={{
+        mx: { md: 5 },
+        padding: 2,
+        minHeight: '100vh',
+        flexShrink: 0,
+        background: '#2F3136',
+        borderRadius: '4px 4px 4px 4px'
+        // borderLeft: "4px solid #5865f2",
+      }}
+    >
+      <Stack
+        direction="row"
+        spacing={2}
+        justifyContent="space-between"
+        alignItems="start"
       >
-        <Stack
-          direction="row"
-          spacing={2}
-          justifyContent="space-between"
-          alignItems="start"
-        >
-          <Skeleton variant="text" animation="wave" width={'40%'} />
-          <Skeleton variant="rectangular" width={40} height={40} />
-        </Stack>
+        <Skeleton variant="text" animation="wave" width={'40%'} />
+        <Skeleton variant="rectangular" width={40} height={40} />
+      </Stack>
 
-        {!loading && message && (
-          <Typography sx={{ color: '#dcddde' }}>{message}</Typography>
-        )}
+      {!loading && message && (
+        <Typography sx={{ color: '#dcddde' }}>{message}</Typography>
+      )}
 
-        <Stack direction="column" spacing={1} sx={{ mt: 1, mb: 1 }}>
-          {Array(20)
-            .fill(0)
-            .map((_, i) => (
-              <Stack key={i} direction="row" justifyContent="space-between">
-                <Skeleton width={'30%'} />
-                <Skeleton width={'30%'} />
-                <Skeleton width={'30%'} />
-              </Stack>
-            ))}
-        </Stack>
+      <Stack direction="column" spacing={1} sx={{ mt: 1, mb: 1 }}>
+        {Array(20)
+          .fill(0)
+          .map((_, i) => (
+            <Stack key={i} direction="row" justifyContent="space-between">
+              <Skeleton width={'30%'} />
+              <Skeleton width={'30%'} />
+              <Skeleton width={'30%'} />
+            </Stack>
+          ))}
+      </Stack>
 
-        <Skeleton width={'100%'} />
-        <Skeleton width={'100%'} />
-        <Skeleton width={'100%'} />
-      </Paper>
-    </Container>
+      <Skeleton width={'100%'} />
+      <Skeleton width={'100%'} />
+      <Skeleton width={'100%'} />
+    </Paper>
   );
 };
diff --git a/app/web/components/PlayerPage.tsx b/app/web/components/PlayerPage.tsx
@@ -56,14 +56,18 @@ export function PlayerPage({ token }: { token: string }) {
     }
   }, [params]); // eslint-disable-line react-hooks/exhaustive-deps
 
-  if (!wars.length)
-    return <Loader loading={loading} message={'No data available...'} />;
+  if (!wars.length) {
+    return (
+      <Container maxWidth="sm" style={{ padding: 0 }}>
+        <Loader loading={loading} message={'No data available...'} />
+      </Container>
+    );
+  }
 
   const attacker = wars?.[0]?.attacker;
-
   return (
     <>
-      <Container maxWidth="sm">
+      <Container maxWidth="sm" style={{ padding: 0 }}>
         <History wars={wars} summary={summary} attacker={attacker} />
       </Container>
     </>