From 5fc0c3213be0fba7a7616cf5d7ed60a1a59ae7b1 Mon Sep 17 00:00:00 2001
From: seb <sebgreenbus@gmail.com>
Date: Fri, 4 Jul 2025 05:01:39 +0200
Subject: [PATCH] Enhance responsive design in profile components by adjusting
 padding and layout properties for improved mobile usability. Updated styles
 in ButtonGroup, CartTab, OrdersTab, SettingsTab, and ProfilePage to ensure
 better visual consistency across different screen sizes.

---
 src/components/header/ButtonGroup.js  |  2 +-
 src/components/profile/CartTab.js     |  2 +-
 src/components/profile/OrdersTab.js   |  6 +++---
 src/components/profile/SettingsTab.js |  8 ++++----
 src/pages/ProfilePage.js              | 19 ++++++++++++++-----
 5 files changed, 23 insertions(+), 14 deletions(-)

diff --git a/src/components/header/ButtonGroup.js b/src/components/header/ButtonGroup.js
index f6659b4..c395cd5 100644
--- a/src/components/header/ButtonGroup.js
+++ b/src/components/header/ButtonGroup.js
@@ -142,7 +142,7 @@ class ButtonGroup extends Component {
           onClose={this.toggleCart}
           disableScrollLock={true}
         >
-          <Box sx={{ width: 420, p: 2 }}>
+          <Box sx={{ width: { xs: '100vw', sm: 420 }, p: { xs: 1, sm: 2 } }}>
             <Box 
               sx={{ 
                 display: 'flex', 
diff --git a/src/components/profile/CartTab.js b/src/components/profile/CartTab.js
index e44d42e..4cc6f0e 100644
--- a/src/components/profile/CartTab.js
+++ b/src/components/profile/CartTab.js
@@ -409,7 +409,7 @@ class CartTab extends Component {
     const displayError = completionError || preSubmitError;
 
     return (
-      <Box sx={{ p: 3 }}>
+              <Box sx={{ p: { xs: 1, sm: 3 } }}>
         {/* Payment Confirmation */}
         {showPaymentConfirmation && (
           <PaymentConfirmationDialog
diff --git a/src/components/profile/OrdersTab.js b/src/components/profile/OrdersTab.js
index ad7029f..ed9608a 100644
--- a/src/components/profile/OrdersTab.js
+++ b/src/components/profile/OrdersTab.js
@@ -139,7 +139,7 @@ const OrdersTab = ({ orderIdFromHash }) => {
 
   if (loading) {
     return (
-      <Box sx={{ p: 3, display: "flex", justifyContent: "center" }}>
+              <Box sx={{ p: { xs: 1, sm: 3 }, display: "flex", justifyContent: "center" }}>
         <CircularProgress />
       </Box>
     );
@@ -147,14 +147,14 @@ const OrdersTab = ({ orderIdFromHash }) => {
 
   if (error) {
     return (
-      <Box sx={{ p: 3 }}>
+      <Box sx={{ p: { xs: 1, sm: 3 } }}>
         <Alert severity="error">{error}</Alert>
       </Box>
     );
   }
 
   return (
-    <Box sx={{ p: 3 }}>
+            <Box sx={{ p: { xs: 1, sm: 3 } }}>
       {orders.length > 0 ? (
         <TableContainer component={Paper}>
           <Table>
diff --git a/src/components/profile/SettingsTab.js b/src/components/profile/SettingsTab.js
index 52b853d..44679fa 100644
--- a/src/components/profile/SettingsTab.js
+++ b/src/components/profile/SettingsTab.js
@@ -235,8 +235,8 @@ class SettingsTab extends Component {
   
   render() {
     return (
-      <Box sx={{ p: 3 }}>
-        <Paper sx={{ p: 3}}>
+      <Box sx={{ p: { xs: 1, sm: 3 } }}>
+        <Paper sx={{ p: { xs: 2, sm: 3 } }}>
           <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
             Passwort ändern
           </Typography>
@@ -289,7 +289,7 @@ class SettingsTab extends Component {
         
         <Divider sx={{ my: 4 }} />
         
-        <Paper sx={{ p: 3 }}>
+        <Paper sx={{ p: { xs: 2, sm: 3 } }}>
           <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
             E-Mail-Adresse ändern
           </Typography>
@@ -332,7 +332,7 @@ class SettingsTab extends Component {
         
         <Divider sx={{ my: 4 }} />
         
-        <Paper sx={{ p: 3 }}>
+        <Paper sx={{ p: { xs: 2, sm: 3 } }}>
           <Typography variant="subtitle1" fontWeight="bold" gutterBottom>
             API-Schlüssel
           </Typography>
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index fe6db8f..720a68d 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -167,11 +167,16 @@ const ProfilePage = (props) => {
   }
 
   return (
-    <Container maxWidth="md" sx={{ py: 4 }}>
-      <Paper elevation={2} sx={{ borderRadius: 2, overflow: 'hidden' }}>
-        <Box sx={{ bgcolor: '#2e7d32', p: 3, color: 'white' }}>
+    <Container maxWidth="md" sx={{ py: { xs: 0, sm: 4 }, px: { xs: 0, sm: 3 } }}>
+      <Paper elevation={{ xs: 0, sm: 2 }} sx={{ borderRadius: { xs: 0, sm: 2 }, overflow: 'hidden' }}>
+        <Box sx={{ bgcolor: '#2e7d32', p: { xs: 2, sm: 3 }, color: 'white' }}>
           <Typography variant="h5" fontWeight="bold">
-            Mein Profil
+            {window.innerWidth < 600 ? 
+              (tabValue === 0 ? 'Bestellabschluss' : 
+               tabValue === 1 ? 'Bestellungen' : 
+               tabValue === 2 ? 'Einstellungen' : 'Mein Profil') 
+              : 'Mein Profil'
+            }
           </Typography>
           {user && (
             <Typography variant="body1" sx={{ mt: 1 }}>
@@ -185,7 +190,11 @@ const ProfilePage = (props) => {
             value={tabValue}
             onChange={handleTabChange}
             variant="fullWidth"
-            sx={{ borderBottom: 1, borderColor: 'divider' }}
+            sx={{ 
+              borderBottom: 1, 
+              borderColor: 'divider',
+              display: { xs: 'none', sm: 'flex' }
+            }}
             TabIndicatorProps={{
               style: { backgroundColor: '#2e7d32' }
             }}