From be9e4a82928bc7e019534044acfa02f366964c86 Mon Sep 17 00:00:00 2001
From: Jessica Mulein <jessica@digitaldefiance.org>
Date: Sun, 27 Oct 2024 22:08:17 +0000
Subject: [PATCH] Impove home page viewport issues

---
 src/components/screens/AboutScreen.tsx | 36 ++++++++++++++++----------
 1 file changed, 23 insertions(+), 13 deletions(-)

diff --git a/src/components/screens/AboutScreen.tsx b/src/components/screens/AboutScreen.tsx
index 0cd00a9..8005902 100644
--- a/src/components/screens/AboutScreen.tsx
+++ b/src/components/screens/AboutScreen.tsx
@@ -1,21 +1,31 @@
 import React from 'react';
-import {
-  Box,
-  Typography,
-  Link,
-  Container,
-  Paper,
-  List,
-  ListItem,
-  ListItemText,
-} from '@mui/material';
+import { Box, Typography, Link, Paper, List, ListItem, ListItemText } from '@mui/material';
 import DominionTransparentLogo from '@/assets/images/Dominion-tx.png';
 import SuperCapsText from '@/components/SuperCapsText';
 import { VERSION_NUMBER } from '@/game/constants';
+import CenteredContainer from '../CenteredContainer';
 
 export default function AboutScreen() {
   return (
-    <Container maxWidth="md" sx={{ height: '100vh', display: 'flex', flexDirection: 'column' }}>
+    <CenteredContainer
+      sx={{
+        marginLeft: { xs: 0, md: '15%' },
+        marginRight: { xs: 0, md: '15%' },
+        minHeight: '100%',
+        overflow: 'hidden',
+        overflowY: 'auto',
+        scrollbarWidth: 'none', // For Firefox
+        justifyContent: 'flex-start',
+        py: 2,
+        '&::-webkit-scrollbar': {
+          display: 'none', // For Chrome, Safari, and Opera
+        },
+        '@media (max-width: 900px)': {
+          marginLeft: 0,
+          marginRight: 0,
+        },
+      }}
+    >
       <Box sx={{ flexGrow: 1, py: 4 }}>
         <Box sx={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
           <Box>
@@ -157,9 +167,9 @@ export default function AboutScreen() {
           </Box>
         </Box>
       </Box>
-      <Box mt={4} width="100%" textAlign="center">
+      <Box mt={4} width="100%" textAlign="center" sx={{ paddingBottom: '56px' }}>
         <Typography variant="body2">Version: {VERSION_NUMBER}</Typography>
       </Box>
-    </Container>
+    </CenteredContainer>
   );
 }