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

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>