From 8abf64ca387f499868e1a0cbf00c41cfa6846b67 Mon Sep 17 00:00:00 2001
From: seb <sebgreenbus@gmail.com>
Date: Fri, 4 Jul 2025 04:51:15 +0200
Subject: [PATCH] Enhance responsive design across components by adjusting
 padding, margins, and layout properties for better mobile usability. Updated
 styles in Content, Header, Product, ProductFilters, ProductList, and
 SearchBar components to improve visual consistency and user experience on
 various screen sizes.

---
 src/components/Content.js          |  24 ++-----
 src/components/Header.js           |  31 ++++++--
 src/components/Product.js          |  13 ++--
 src/components/ProductFilters.js   |  12 ++--
 src/components/ProductList.js      | 109 ++++++++++++++++++++++++-----
 src/components/header/SearchBar.js |   2 +-
 6 files changed, 140 insertions(+), 51 deletions(-)

diff --git a/src/components/Content.js b/src/components/Content.js
index 4888d5b..8c03e21 100644
--- a/src/components/Content.js
+++ b/src/components/Content.js
@@ -441,7 +441,7 @@ class Content extends Component {
     
 
     return (
-      <Container maxWidth="xl" sx={{ py: 2, flexGrow: 1, display: 'grid', gridTemplateRows: '1fr' }}>
+      <Container maxWidth="xl" sx={{ py: { xs: 0, sm: 2 }, px: { xs: 0, sm: 3 }, flexGrow: 1, display: 'grid', gridTemplateRows: '1fr' }}>
 
         {showCategoryBoxes ? (
           // Show category boxes layout when no products but have child categories
@@ -491,30 +491,20 @@ class Content extends Component {
                         </Box>
                         
                         {/* Subcategories Grid */}
-                        <Box sx={{ flex: 1, minWidth: 0 }}>
-                          <CategoryBoxGrid 
-                            categories={this.state.childCategories}
-                            showTitle={false}
-                            spacing={3}
-                          />
+                        <Box sx={{ flexGrow: 1 }}>
+                          <CategoryBoxGrid categories={this.state.childCategories} />
                         </Box>
                       </Box>
                     );
                   } else {
-                    // Just show subcategories without parent
-                    return (
-                      <CategoryBoxGrid 
-                        categories={this.state.childCategories}
-                        showTitle={false}
-                        spacing={3}
-                      />
-                    );
+                    // No parent category, just show subcategories
+                    return <CategoryBoxGrid categories={this.state.childCategories} />;
                   }
                 })()}
               </Box>
             )}
 
-            {/* Show parent category navigation when in 2nd or 3rd level but no subcategories */}
+            {/* Show standalone parent category navigation when there are only products */}
             {this.state.loaded && 
              this.props.params.categoryId && 
              !(this.state.unfilteredProducts.length > 0 && this.state.childCategories.length > 0) && (() => {
@@ -558,7 +548,7 @@ class Content extends Component {
             <Box sx={{ 
               display: 'grid', 
               gridTemplateColumns: { xs: '1fr', sm: '1fr 2fr', md: '1fr 3fr', lg: '1fr 4fr', xl: '1fr 4fr' }, 
-              gap: 3
+              gap: { xs: 0, sm: 3 }
             }}>
 
             <Stack direction="row" spacing={0} sx={{ 
diff --git a/src/components/Header.js b/src/components/Header.js
index 0d5392e..5ad6fa0 100644
--- a/src/components/Header.js
+++ b/src/components/Header.js
@@ -42,8 +42,12 @@ class Header extends Component {
 
     return (
       <AppBar position="sticky" color="primary" elevation={0} sx={{ zIndex: 1100 }}>
-        <Toolbar sx={{ minHeight: 64 }}>
-          <Container maxWidth="lg" sx={{ display: 'flex', alignItems: 'center' }}>
+        <Toolbar sx={{ minHeight: 64, py: { xs: 0.5, sm: 0 } }}>
+          <Container maxWidth="lg" sx={{ 
+            display: 'flex', 
+            alignItems: 'center',
+            px: { xs: 0, sm: 3 }
+          }}>
             {/* First row: Logo and ButtonGroup on xs, all items on larger screens */}
             <Box sx={{ 
               display: 'flex', 
@@ -56,23 +60,36 @@ class Header extends Component {
                 display: 'flex', 
                 alignItems: 'center', 
                 width: '100%',
-                justifyContent: { xs: 'space-between', sm: 'flex-start' }
+                justifyContent: { xs: 'space-between', sm: 'flex-start' },
+                minHeight: { xs: 52, sm: 'auto' },
+                px: { xs: 0, sm: 0 }
               }}>
                 <Logo />
                 {/* SearchBar visible on sm and up */}
                 <Box sx={{ display: { xs: 'none', sm: 'block' }, flexGrow: 1 }}>
                   <SearchBar />
                 </Box>
-                <ButtonGroupWithRouter socket={socket}/>
+                <Box sx={{ 
+                  display: 'flex',
+                  alignItems: { xs: 'flex-end', sm: 'center' },
+                  transform: { xs: 'translateY(4px) translateX(9px)', sm: 'none' },
+                  ml: { xs: 0, sm: 0 }
+                }}>
+                  <ButtonGroupWithRouter socket={socket}/>
+                </Box>
               </Box>
               
-              {/* Second row: SearchBar only on xs */}
+              {/* Second row: SearchBar only on xs - make it wider */}
               <Box sx={{ 
                 display: { xs: 'block', sm: 'none' }, 
                 width: '100%',
-                mt: 1,mb: 1
+                mt: { xs: 1, sm: 0 },
+                mb: { xs: 0.5, sm: 0 },
+                px: { xs: 0, sm: 0 }
               }}>
-                <SearchBar />
+                <Box sx={{ width: '100%' }}>
+                  <SearchBar />
+                </Box>
               </Box>
             </Box>
           </Container>
diff --git a/src/components/Product.js b/src/components/Product.js
index c72386e..5fee10e 100644
--- a/src/components/Product.js
+++ b/src/components/Product.js
@@ -180,18 +180,21 @@ class Product extends Component {
         
         <Card 
           sx={{ 
-            width: { xs: 'calc(100vw - 48px)', sm: '250px' },
-            minWidth: { xs: 'calc(100vw - 48px)', sm: '250px' },
+            width: { xs: '100vw', sm: '250px' },
+            minWidth: { xs: '100vw', sm: '250px' },
             height: '100%',
             display: 'flex',
             flexDirection: 'column',
             transition: 'transform 0.3s ease, box-shadow 0.3s ease',
             position: 'relative',
             overflow: 'hidden',
-            borderRadius: '8px',
+            borderRadius: { xs: 0, sm: '8px' },
+            border: { xs: 'none', sm: 'inherit' },
+            boxShadow: { xs: 'none', sm: 'inherit' },
+            mx: { xs: 0, sm: 'auto' },
             '&:hover': {
-              transform: 'translateY(-5px)',
-              boxShadow: '0px 10px 20px rgba(0,0,0,0.1)'
+              transform: { xs: 'none', sm: 'translateY(-5px)' },
+              boxShadow: { xs: 'none', sm: '0px 10px 20px rgba(0,0,0,0.1)' }
             }
           }}
         >
diff --git a/src/components/ProductFilters.js b/src/components/ProductFilters.js
index 4c26e61..9be4dd2 100644
--- a/src/components/ProductFilters.js
+++ b/src/components/ProductFilters.js
@@ -162,13 +162,17 @@ class ProductFilters extends Component {
     return (
       <Paper 
         id="filters-paper"
-        elevation={1} 
+        elevation={window.innerWidth < 600 ? 0 : 1} 
         sx={{ 
-          p: 2, 
-          borderRadius: 2, 
+          p: { xs: 1, sm: 2 }, 
+          borderRadius: { xs: 0, sm: 2 }, 
           bgcolor: 'background.paper',
           display: 'flex',
-          flexDirection: 'column'
+          flexDirection: 'column',
+          border: { xs: 'none', sm: 'inherit' },
+          boxShadow: { xs: 'none', sm: 'inherit' },
+          mx: { xs: 0, sm: 'auto' },
+          width: { xs: '100%', sm: 'auto' }
         }}
       >
 
diff --git a/src/components/ProductList.js b/src/components/ProductList.js
index d4d6f39..cccd469 100644
--- a/src/components/ProductList.js
+++ b/src/components/ProductList.js
@@ -123,8 +123,14 @@ class ProductList extends Component {
 
   renderPagination = (pages, page) => {
     return (
-      <Box sx={{ height: 64, display: 'flex', alignItems: 'center', justifyContent: 'left' }}>
-        {((this.state.itemsPerPage==='all')||(this.props.products.length<this.state.itemsPerPage))?null:
+      <Box sx={{ 
+        height: 64, 
+        display: 'flex', 
+        alignItems: 'center', 
+        justifyContent: 'left',
+        width: '100%'
+      }}>
+        {(this.state.itemsPerPage==='all')?null:
           <Pagination 
             count={pages} 
             page={page} 
@@ -164,15 +170,28 @@ class ProductList extends Component {
     const products = this.state.itemsPerPage==='all'?[...filteredProducts]:filteredProducts.slice((this.state.page - 1) * this.state.itemsPerPage , this.state.page * this.state.itemsPerPage);
 
     return (
-      <Box sx={{ height: '100%' }}>
+      <Box sx={{ height: '100%', px: { xs: 0, sm: 0 } }}>
         <Box sx={{ 
           display: 'flex', 
           justifyContent: 'space-between', 
-          alignItems: 'center'
+          alignItems: 'center',
+          flexDirection: { xs: 'column', sm: 'row' },
+          gap: { xs: 1, sm: 0 },
+          px: { xs: 0, sm: 0 },
+          py: { xs: 1, sm: 0 },
+          bgcolor: { xs: '#e8f5e8', sm: 'transparent' },
+          mb: { xs: 0, sm: 0 }
         }}>
 
 
-            <Box sx={{ display: 'flex', gap: 1, alignItems: 'center', flexWrap: 'wrap' }}>
+            <Box sx={{ 
+              display: 'flex', 
+              gap: { xs: 0.5, sm: 1 }, 
+              alignItems: 'center', 
+              flexWrap: 'wrap',
+              order: { xs: 2, sm: 1 },
+              px: { xs: 1, sm: 0 }
+            }}>
               {this.props.activeAttributeFilters.map((filter,index) => (
                 <Chip 
                   size="medium"                
@@ -207,9 +226,23 @@ class ProductList extends Component {
               ))}
             </Box>
 
-            <Box sx={{ display: 'flex', gap: 2, alignItems: 'center' }}>
+            <Box sx={{ 
+              display: 'flex', 
+              gap: { xs: 1, sm: 2 }, 
+              alignItems: 'center',
+              order: { xs: 1, sm: 2 },
+              width: { xs: '100%', sm: 'auto' },
+              justifyContent: { xs: 'space-between', sm: 'flex-end' },
+              px: { xs: 1, sm: 0 }
+            }}>
               {/* Sort Dropdown */}
-              <FormControl variant="outlined" size="small" sx={{ minWidth: 140 }}>
+              <FormControl 
+                variant={window.innerWidth < 600 ? 'standard' : 'outlined'} 
+                size="small" 
+                sx={{ 
+                  minWidth: { xs: 120, sm: 140 }
+                }}
+              >
                 <InputLabel id="sort-by-label">Sortierung</InputLabel>
                 <Select
                   size="small"
@@ -244,7 +277,13 @@ class ProductList extends Component {
               </FormControl>
               
               {/* Per Page Dropdown */}
-              <FormControl variant="outlined" size="small" sx={{ minWidth: 100 }}>
+              <FormControl 
+                variant={window.innerWidth < 600 ? 'standard' : 'outlined'} 
+                size="small" 
+                sx={{ 
+                  minWidth: { xs: 80, sm: 100 }
+                }}
+              >
                 <InputLabel id="products-per-page-label">pro Seite</InputLabel>
                 <Select
                   labelId="products-per-page-label"
@@ -278,16 +317,37 @@ class ProductList extends Component {
                   <MenuItem value="all">Alle</MenuItem>
                 </Select>
               </FormControl>
+              
+              {/* Product count info - mobile only */}
+              <Box sx={{ 
+                display: { xs: 'block', sm: 'none' },
+                ml: 1
+              }}>
+                <Typography variant="body2" color="text.secondary" sx={{ fontSize: '0.75rem' }}>
+                  {
+                    this.props.totalProductCount==this.props.products.length && this.props.totalProductCount>0 ?
+                    `${this.props.totalProductCount} Produkte`
+                    :
+                    `${this.props.products.length} von ${this.props.totalProductCount} Produkte`
+                  }
+                </Typography>
+              </Box>
             </Box>
         </Box>
  
         <Box sx={{ 
           display: 'flex', 
           justifyContent: 'space-between', 
-          alignItems: 'center'
+          alignItems: 'center',
+          px: { xs: 0, sm: 0 },
+          py: { xs: 1, sm: 0 },
+          bgcolor: { xs: '#e8f5e8', sm: 'transparent' },
+          mt: { xs: 0, sm: 0 }
         }}>
-        { this.renderPagination(Math.ceil(filteredProducts.length / this.state.itemsPerPage), this.state.page) }
-        <Stack direction="row" spacing={2}>
+        <Box sx={{ px: { xs: 1, sm: 0 }, width: '100%' }}>
+          { this.renderPagination(Math.ceil(filteredProducts.length / this.state.itemsPerPage), this.state.page) }
+        </Box>
+        <Stack direction="row" spacing={2} sx={{ display: { xs: 'none', sm: 'flex' }, px: { xs: 1, sm: 0 } }}>
           <Typography variant="body2" color="text.secondary">
                 {/*this.props.dataType == 'category' && (<>Kategorie: {this.props.dataParam}</>)}*/}
                 {this.props.dataType == 'search' && (<>Suchergebnisse für: "{this.props.dataParam}"</>)}
@@ -303,14 +363,19 @@ class ProductList extends Component {
         </Stack>
         </Box>
 
-        <Grid container spacing={2}>
-          {products.map((product) => (
+        <Grid container spacing={{ xs: 0, sm: 2 }}>
+          {products.map((product, index) => (
             <Grid 
-              key={product.id} 
+              key={product.id}
               sx={{
                 display: 'flex', 
                 justifyContent: { xs: 'stretch', sm: 'center' },
-                mb: 1
+                mb: { xs: 0, sm: 1 },
+                width: { xs: '100%', sm: 'auto' },
+                borderBottom: { 
+                  xs: index < products.length - 1 ? '16px solid #e8f5e8' : 'none', 
+                  sm: 'none' 
+                }
               }}
             > 
               <Product 
@@ -338,8 +403,18 @@ class ProductList extends Component {
             </Grid>
           ))}
         </Grid>
-
-        {this.renderPagination(Math.ceil(filteredProducts.length / this.state.itemsPerPage), this.state.page)}
+        
+        {/* Bottom pagination */}
+        <Box sx={{ 
+          px: { xs: 0, sm: 0 },
+          py: { xs: 1, sm: 1 },
+          bgcolor: { xs: '#e8f5e8', sm: 'transparent' },
+          mt: { xs: 0, sm: 2 }
+        }}>
+          <Box sx={{ px: { xs: 1, sm: 0 } }}>
+            {this.renderPagination(Math.ceil(filteredProducts.length / this.state.itemsPerPage), this.state.page)}
+          </Box>
+        </Box>
       </Box>
     );
   }
diff --git a/src/components/header/SearchBar.js b/src/components/header/SearchBar.js
index 92c131e..d52891e 100644
--- a/src/components/header/SearchBar.js
+++ b/src/components/header/SearchBar.js
@@ -219,7 +219,7 @@ const SearchBar = () => {
       onSubmit={handleSearch}
       sx={{
         flexGrow: 1,
-        mx: { xs: 1, sm: 2, md: 4 },
+        mx: { xs: 0, sm: 2, md: 4 },
         position: "relative",
       }}
     >