fix: adapt fallback screen to be responsive

graasp · Oct 16, 2023 · 140f00c · 140f00c
1 parent 5625597
commit 140f00c
Showing 1 changed file with 16 additions and 6 deletions.
diff --git a/src/components/Fallback.tsx b/src/components/Fallback.tsx
@@ -14,12 +14,13 @@ const FallbackComponent = (): JSX.Element => {
 
   return (
     <Stack
-      direction="row"
+      direction={['column-reverse', 'row']}
       justifyContent="center"
       alignItems="center"
-      sx={{ width: 1, height: '100vh' }}
+      height="100svh"
+      spacing={4}
     >
-      <Box sx={{ ml: 4 }}>
+      <Box>
         <Typography variant="h1">
           {translateBuilder(BUILDER.FALLBACK_TITLE)}
         </Typography>
@@ -32,9 +33,18 @@ const FallbackComponent = (): JSX.Element => {
           {translateBuilder(BUILDER.FALLBACK_BACK_TO_HOME)}
         </Button>
       </Box>
-      <Box>
-        <ErrorOutlineIcon style={{ fontSize: '25em', color: '#5050d2' }} />
-      </Box>
+      <ErrorOutlineIcon
+        fontSize="large"
+        htmlColor="#5050d2"
+        sx={{
+          display: 'flex',
+          width: '100%',
+          maxWidth: '10em',
+          aspectRatio: 1,
+          height: 'auto',
+          maxHeight: '10em',
+        }}
+      />
     </Stack>
   );
 };