refactor: Update layout and styling in various components for improved responsiveness and visual consistency on mobile; adjust zIndex and position properties, and enhance navigation handling in ProductDetailPage

src/PrerenderProduct.js

@@ -165,16 +165,15 @@ class PrerenderProduct extends React.Component {
             sx: {
               mb: 2,
               position: ["-webkit-sticky", "sticky"],
+              // No CategoryList in prerender — two-row toolbar only; safe-area for notched phones.
               top: {
-                xs: "80px",
+                xs: "calc(env(safe-area-inset-top, 0px) + 128px)",
                 sm: "80px",
-                md: "80px",
-                lg: "80px",
               },
               left: 0,
               width: "100%",
               display: "flex",
-              zIndex: 999, // Just below the AppBar
+              zIndex: (theme) => theme.zIndex.appBar - 1,
               py: 0,
               px: 2,
             }

src/components/Content.js

@@ -701,7 +701,7 @@ class Content extends Component {
                 minHeight: { xs: 'min-content', sm: '100%' }
               }}>
 
-                <Box >
+                <Box sx={{ overflow: 'visible', minWidth: 0 }}>
 
                   <ProductFilters
                     products={this.state.unfilteredProducts}

src/components/ProductDetailPage.js

@@ -1174,18 +1174,17 @@ class ProductDetailPage extends Component {
         <Box
           sx={{
             mb: 2,
-            position: ["-webkit-sticky", "sticky"], // Provide both prefixed and standard
+            position: "sticky",
             top: {
-              xs: "110px",
+              xs: "calc(env(safe-area-inset-top, 0px) + 160px)",
               sm: "110px",
               md: "110px",
               lg: "110px",
-            } /* Offset to sit below the header 120 mith menu for md and lg*/,
+            },
             left: 0,
             width: "100%",
             display: "flex",
-            zIndex: (theme) =>
+            zIndex: (theme) => theme.zIndex.appBar - 1,
-              theme.zIndex.appBar - 1 /* Just below the AppBar */,
             py: 0,
             px: 2,
           }}
@@ -1200,10 +1199,19 @@ class ProductDetailPage extends Component {
               borderRadius: 1,
             }}
           >
-            <Typography variant="body2" color="text.secondary">
+            <Typography variant="body2" color="text.secondary" component="div">
               <Link
                 to="/"
-                onClick={() => this.props.navigate(-1)}
+                onClick={(e) => {
+                  e.preventDefault();
+                  if (this.props.navigate) {
+                    if (typeof window !== "undefined" && window.history.length > 1) {
+                      this.props.navigate(-1);
+                    } else {
+                      this.props.navigate("/");
+                    }
+                  }
+                }}
                 style={{
                   paddingLeft: 16,
                   paddingRight: 16,

src/components/ProductFilters.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import Box from '@mui/material/Box';
 import Paper from '@mui/material/Paper';
 import Typography from '@mui/material/Typography';
 import Filter from './Filter.js';
@@ -201,19 +202,31 @@ class ProductFilters extends Component {
 
   render() {
     return (
+      <Box
+        sx={{
+          px: { xs: 2, sm: 0 },
+          pt: { xs: 2, sm: 0 },
+          /* Room below Paper so elevation shadow isn’t clipped by grid/parent */
+          pb: { xs: 2, sm: 2 },
+          overflow: 'visible',
+          /* Same green as ProductList / product strip mobile (#e8f5e8), not theme background.default (#C8E6C9) */
+          bgcolor: { xs: '#e8f5e8', sm: 'transparent' },
+        }}
+      >
       <Paper 
         id="filters-paper"
-        elevation={window.innerWidth < 600 ? 0 : 1} 
+        elevation={1}
         sx={{ 
-          p: { xs: 1, sm: 2 }, 
+          p: { xs: 2.5, sm: 2.5 }, 
-          borderRadius: { xs: 0, sm: 2 }, 
+          mx: { sm: 'auto' },
+          maxWidth: '100%',
+          borderRadius: 2,
           bgcolor: 'background.paper',
           display: 'flex',
           flexDirection: 'column',
           border: { xs: 'none', sm: 'inherit' },
-          boxShadow: { xs: 'none', sm: 'inherit' },
+          boxSizing: 'border-box',
-          mx: { xs: 0, sm: 'auto' },
+          overflow: 'visible',
-          width: { xs: '100%', sm: 'auto' }
         }}
       >
 
@@ -295,6 +308,7 @@ class ProductFilters extends Component {
         />
         </>)}
       </Paper>
+      </Box>
     );
   }
 }