feat: Enhance Filter component with collapsible options and clear filter functionality; improve responsiveness and UI feedback on mobile

src/components/Filter.js

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
+import Chip from '@mui/material/Chip';
 import Checkbox from '@mui/material/Checkbox';
 import IconButton from '@mui/material/IconButton';
 import Collapse from '@mui/material/Collapse';
@@ -138,21 +139,25 @@ class Filter extends Component {
 
   handleOptionChange = (event) => {
     const { name, checked } = event.target;
+    const narrow =
+      typeof window !== "undefined" && window.innerWidth < 600;
 
-    // Update local state first to ensure immediate UI feedback
+    this.setState((prevState) => {
-    this.setState(prevState => ({
+      const nextOptions = {
-      options: {
         ...prevState.options,
-        [name]: checked
+        [name]: checked,
-      }
+      };
-    }));
+      return {
+        options: nextOptions,
+        ...(narrow && checked ? { isCollapsed: true } : {}),
+      };
+    });
 
-    // Then notify the parent component
     if (this.props.onFilterChange) {
       this.props.onFilterChange({
-        type: this.props.filterType || 'default', 
+        type: this.props.filterType || "default",
-        name: name, 
+        name,
-        value: checked 
+        value: checked,
       });
     }
   };
@@ -181,6 +186,13 @@ class Filter extends Component {
     }));
   };
 
+  clearFilterOption = (optionId) => (event) => {
+    event.stopPropagation();
+    this.handleOptionChange({
+      target: { name: optionId, checked: false },
+    });
+  };
+
   render() {
     const { options, counts, isCollapsed } = this.state;
     const { title, options: optionsList = [] } = this.props;
@@ -267,12 +279,80 @@ class Filter extends Component {
             )}
           </Typography>
           {isXsScreen && (
-            <IconButton size="small" aria-label={isCollapsed ? "Filter erweitern" : "Filter einklappen"} sx={{ p: 0 }}>
+            <IconButton
+              size="small"
+              aria-label={isCollapsed ? "Filter erweitern" : "Filter einklappen"}
+              sx={{ p: 0 }}
+              onClick={(e) => {
+                e.stopPropagation();
+                this.toggleCollapse();
+              }}
+            >
               {isCollapsed ? <ExpandMoreIcon /> : <ExpandLessIcon />}
             </IconButton>
           )}
         </Box>
 
+        {isXsScreen &&
+          isCollapsed &&
+          optionsList.some((o) => options[o.id]) && (
+            <Box
+              sx={{
+                display: "flex",
+                flexWrap: "wrap",
+                gap: 0.75,
+                mt: 0.5,
+                mb: 1,
+                pl: 0.25,
+              }}
+            >
+              {optionsList
+                .filter((o) => options[o.id])
+                .map((option) => (
+                  <Chip
+                    key={option.id}
+                    size="small"
+                    variant="outlined"
+                    clickable
+                    onClick={this.clearFilterOption(option.id)}
+                    onDelete={this.clearFilterOption(option.id)}
+                    label={
+                      <span
+                        style={{
+                          display: "inline-flex",
+                          alignItems: "center",
+                          gap: 6,
+                          maxWidth: 200,
+                        }}
+                      >
+                        {this.props.filterType === "manufacturer" &&
+                          this.props.manufacturerImages?.get(option.id) && (
+                            <img
+                              src={this.props.manufacturerImages.get(option.id)}
+                              alt=""
+                              style={{
+                                height: 14,
+                                width: "auto",
+                                objectFit: "contain",
+                              }}
+                            />
+                          )}
+                        <span
+                          style={{
+                            overflow: "hidden",
+                            textOverflow: "ellipsis",
+                            whiteSpace: "nowrap",
+                          }}
+                        >
+                          {option.name}
+                        </span>
+                      </span>
+                    }
+                  />
+                ))}
+            </Box>
+          )}
+        
         <Collapse in={!isXsScreen || !isCollapsed}>
           <Box sx={{ width: '100%' }}>
             <table style={tableStyle}>

src/components/ProductDetailPage.js

@@ -1089,6 +1089,8 @@ class ProductDetailPage extends Component {
     const { product, loading, upgrading, error, attributeImages, /*isSteckling,*/ attributes, komponentenLoaded, komponentenData, komponentenImages, totalKomponentenPrice, totalSavings, shareAnchorEl, sharePopperOpen, snackbarOpen, snackbarMessage, snackbarSeverity } =
       this.state;
 
+    const hasAttributeImages = attributes.some((attr) => attributeImages[attr.kMerkmalWert]);
+
     // Debug alerts removed
 
 
@@ -1298,7 +1300,19 @@ class ProductDetailPage extends Component {
 
             <Box sx={{ minHeight: "107px", display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 2, gap: 2 }}>
               {(attributes.some(attr => attributeImages[attr.kMerkmalWert]) || attributes.some(attr => !attributeImages[attr.kMerkmalWert])) && (
-                <Stack direction="row" spacing={0} sx={{ flexWrap: "wrap", gap: 1, flex: 1 }}>
+                <Stack
+                  direction="row"
+                  spacing={0}
+                  sx={{
+                    flexWrap: "wrap",
+                    gap: 1,
+                    flex: 1,
+                    display: {
+                      xs: hasAttributeImages ? "flex" : "none",
+                      sm: "flex",
+                    },
+                  }}
+                >
                   {attributes
                     .filter(attribute => attributeImages[attribute.kMerkmalWert])
                     .map((attribute) => {
@@ -1321,7 +1335,11 @@ class ProductDetailPage extends Component {
                         key={attribute.kMerkmalWert}
                         label={attribute.cWert}
                         disabled
-                        sx={{
+                        sx={(theme) => ({
+                          // Max-width query: reliable on portrait phones (avoids display:contents wrapper quirks)
+                          [theme.breakpoints.down('sm')]: {
+                            display: 'none',
+                          },
                           '&.Mui-disabled': {
                             opacity: 1, // ← Remove the "fog"
                           },
@@ -1329,7 +1347,7 @@ class ProductDetailPage extends Component {
                             fontWeight: 'bold',
                             color: 'inherit', // ← Keep normal text color
                           },
-                        }}
+                        })}
                       />
                     ))}
                 </Stack>