From 9ca6c4e88389e33964b4dc6249035d9a2a8579d5 Mon Sep 17 00:00:00 2001
From: Starstrike <raiden89@live.com>
Date: Thu, 1 May 2025 15:08:22 -0400
Subject: [PATCH] Improve mobile responsiveness: Fix scrolling and button
 wrapping issues - Changed container position, added button wrapping,
 responsive padding and table scrolling

---
 frontend/src/components/EventAdmin.tsx | 45 ++++++++++++++++++++------
 frontend/src/components/EventView.tsx  | 26 ++++++++++-----
 2 files changed, 54 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/EventAdmin.tsx b/frontend/src/components/EventAdmin.tsx
index 495f38f..164df17 100644
--- a/frontend/src/components/EventAdmin.tsx
+++ b/frontend/src/components/EventAdmin.tsx
@@ -435,25 +435,30 @@ const EventAdmin: React.FC = () => {
         backgroundPosition: 'center',
         backgroundRepeat: 'no-repeat',
         backgroundAttachment: 'fixed',
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
+        position: 'relative',
         overflowY: 'auto',
         py: 4,
       }}
     >
       <Container maxWidth="lg">
-        <Paper elevation={3} sx={{ p: 4, mt: 4 }}>
+        <Paper elevation={3} sx={{ p: { xs: 2, sm: 4 }, mt: 4 }}>
           <Box sx={{ mb: 4 }}>
             <Typography variant="h4" component="h2" color="primary" gutterBottom>
               {event.title} - Admin
             </Typography>
-            <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
+            <Box sx={{ 
+              display: 'flex', 
+              flexWrap: 'wrap',
+              gap: 2, 
+              mb: 3 
+            }}>
               <Button
                 variant="outlined"
                 onClick={() => navigate('/')}
+                sx={{ 
+                  minWidth: 'fit-content',
+                  whiteSpace: 'nowrap'
+                }}
               >
                 Back to Events
               </Button>
@@ -461,6 +466,10 @@ const EventAdmin: React.FC = () => {
                 variant="outlined"
                 onClick={handleUpdateInfoClick}
                 startIcon={<EditIcon />}
+                sx={{ 
+                  minWidth: 'fit-content',
+                  whiteSpace: 'nowrap'
+                }}
               >
                 Update Info
               </Button>
@@ -468,6 +477,10 @@ const EventAdmin: React.FC = () => {
                 variant="outlined"
                 startIcon={<AddIcon />}
                 onClick={() => setManageItemsDialogOpen(true)}
+                sx={{ 
+                  minWidth: 'fit-content',
+                  whiteSpace: 'nowrap'
+                }}
               >
                 Manage Items
               </Button>
@@ -476,6 +489,10 @@ const EventAdmin: React.FC = () => {
                 color="error"
                 startIcon={<DeleteIcon />}
                 onClick={() => setDeleteEventDialogOpen(true)}
+                sx={{ 
+                  minWidth: 'fit-content',
+                  whiteSpace: 'nowrap'
+                }}
               >
                 Delete Event
               </Button>
@@ -504,7 +521,12 @@ const EventAdmin: React.FC = () => {
             <Typography variant="h6">
               Items Status
             </Typography>
-            <Box sx={{ display: 'flex', flexDirection: 'column', gap: 3, maxWidth: '60%' }}>
+            <Box sx={{ 
+              display: 'flex', 
+              flexDirection: 'column', 
+              gap: 3, 
+              maxWidth: { xs: '100%', sm: '60%' }
+            }}>
               <Box>
                 <Typography variant="subtitle1" gutterBottom>
                   Still Needed:
@@ -551,7 +573,12 @@ const EventAdmin: React.FC = () => {
             RSVPs ({rsvps.length})
           </Typography>
 
-          <TableContainer>
+          <TableContainer sx={{ 
+            overflowX: 'auto',
+            '& .MuiTable-root': {
+              minWidth: { xs: '100%', sm: 650 }
+            }
+          }}>
             <Table>
               <TableHead>
                 <TableRow>
diff --git a/frontend/src/components/EventView.tsx b/frontend/src/components/EventView.tsx
index 17e0220..6159edb 100644
--- a/frontend/src/components/EventView.tsx
+++ b/frontend/src/components/EventView.tsx
@@ -142,25 +142,30 @@ const EventView: React.FC = () => {
         backgroundPosition: 'center',
         backgroundRepeat: 'no-repeat',
         backgroundAttachment: 'fixed',
-        position: 'fixed',
-        top: 0,
-        left: 0,
-        right: 0,
-        bottom: 0,
+        position: 'relative',
         overflowY: 'auto',
         py: 4,
       }}
     >
       <Container maxWidth="lg">
-        <Paper elevation={3} sx={{ p: 4, mt: 4 }}>
+        <Paper elevation={3} sx={{ p: { xs: 2, sm: 4 }, mt: 4 }}>
           <Box sx={{ mb: 4 }}>
             <Typography variant="h4" component="h2" color="primary" gutterBottom>
               {event.title} - RSVPs
             </Typography>
-            <Box sx={{ display: 'flex', gap: 2, mb: 3 }}>
+            <Box sx={{ 
+              display: 'flex', 
+              flexWrap: 'wrap',
+              gap: 2, 
+              mb: 3 
+            }}>
               <Button
                 variant="outlined"
                 onClick={() => navigate('/')}
+                sx={{ 
+                  minWidth: 'fit-content',
+                  whiteSpace: 'nowrap'
+                }}
               >
                 Back to Events
               </Button>
@@ -235,7 +240,12 @@ const EventView: React.FC = () => {
             RSVPs ({rsvps.length})
           </Typography>
 
-          <TableContainer>
+          <TableContainer sx={{ 
+            overflowX: 'auto',
+            '& .MuiTable-root': {
+              minWidth: { xs: '100%', sm: 650 }
+            }
+          }}>
             <Table>
               <TableHead>
                 <TableRow>