0.4.1 - viewport issues resolved

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

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',
 }));

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>

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 />

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>
   );
 }

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() {

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;