From c14c8d8b2d3a7bb962fe3e32da9fa89562e3fab5 Mon Sep 17 00:00:00 2001
From: Jessica Mulein <jessica@digitaldefiance.org>
Date: Sun, 27 Oct 2024 21:39:40 +0000
Subject: [PATCH] 0.4.1 - viewport issues resolved

---
 README.md                                     |  6 ++++
 src/components/CenteredContainer.tsx          |  3 +-
 src/components/GameScreen.tsx                 | 10 +++++-
 src/components/TabView.tsx                    |  2 --
 src/components/screens/AboutScreen.tsx        | 36 ++++++++++++-------
 .../screens/DominionAssistantScreen.tsx       |  2 +-
 src/game/constants.ts                         |  2 +-
 7 files changed, 42 insertions(+), 19 deletions(-)

diff --git a/README.md b/README.md
index 5901744..6362005 100644
--- a/README.md
+++ b/README.md
@@ -200,6 +200,12 @@ Join our community of developers.
 
 ## Changelog
 
+### Sun Oct 27 14:39:00 2024
+
+- Version 0.4.1
+  - Restricted Load/Save screen from saving over auto saves
+  - Fixed viewport issues and start working towards responsiveness to different screen sizes.
+
 ### Sat Oct 26 14:46:00 2024
 
 - Version 0.4.0
diff --git a/src/components/CenteredContainer.tsx b/src/components/CenteredContainer.tsx
index d1ac81b..a32e1d3 100644
--- a/src/components/CenteredContainer.tsx
+++ b/src/components/CenteredContainer.tsx
@@ -6,7 +6,8 @@ const CenteredContainer = styled(Box)(({ theme }) => ({
   flexDirection: 'column',
   alignItems: 'center',
   justifyContent: 'center',
-  minHeight: 'calc(100vh - 56px)', // Subtract BottomNavigation height
+  height: 'calc(100vh - 56px)', // instead of minHeight
+  overflow: 'auto', // only show scrollbar when needed
   padding: theme.spacing(2),
   boxSizing: 'border-box',
 }));
diff --git a/src/components/GameScreen.tsx b/src/components/GameScreen.tsx
index 49b925f..27188f8 100644
--- a/src/components/GameScreen.tsx
+++ b/src/components/GameScreen.tsx
@@ -128,7 +128,15 @@ const GameScreen: React.FC<GameScreenProps> = ({ nextTurn, endGame, undoLastActi
 
   return (
     <>
-      <Container>
+      <Container
+        sx={{
+          height: '100%',
+          display: 'flex',
+          flexDirection: 'column',
+          padding: 1,
+          overflow: 'auto',
+        }}
+      >
         <Scoreboard />
         <Player />
         <ButtonContainer>
diff --git a/src/components/TabView.tsx b/src/components/TabView.tsx
index 389316e..06c1f02 100644
--- a/src/components/TabView.tsx
+++ b/src/components/TabView.tsx
@@ -41,8 +41,6 @@ const TabView: React.FC<TabViewProps> = ({ tabs }) => {
         sx={{
           flex: 1,
           overflow: 'auto',
-          // Add bottom padding to prevent content from hiding behind nav
-          paddingBottom: '56px', // Height of BottomNavigation
         }}
       >
         <Outlet />
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>
   );
 }
diff --git a/src/components/screens/DominionAssistantScreen.tsx b/src/components/screens/DominionAssistantScreen.tsx
index 1efebb2..74ee30e 100644
--- a/src/components/screens/DominionAssistantScreen.tsx
+++ b/src/components/screens/DominionAssistantScreen.tsx
@@ -10,7 +10,7 @@ const StyledContainer = styled(Box)(({ theme }) => ({
   flexDirection: 'column',
   alignItems: 'center',
   padding: theme.spacing(2),
-  height: '100vh',
+  height: 'calc(100vh - 56px)',
 }));
 
 export default function DominionAssistantScreen() {
diff --git a/src/game/constants.ts b/src/game/constants.ts
index 657032b..c6f2962 100644
--- a/src/game/constants.ts
+++ b/src/game/constants.ts
@@ -8,7 +8,7 @@ import { IMatsEnabled } from '@/game/interfaces/mats-enabled';
 import { IGameOptions } from '@/game/interfaces/game-options';
 import { deepClone } from '@/game/utils';
 
-export const VERSION_NUMBER = '0.4.0';
+export const VERSION_NUMBER = '0.4.1';
 
 export const MIN_PLAYERS = 2;
 export const MAX_PLAYERS = 6;