From 29a4bfc1c6167fa4dd43e9fcdc51db18c888bb9c Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Sun, 7 Sep 2025 12:14:03 +0200
Subject: [PATCH] fix: update Content and ProductDetailPage components for
 improved UI and functionality

- Added pointerEvents: 'none' to the Content component's Box for better interaction handling.
- Adjusted spacing in the ProductDetailPage's Stack component for a more consistent layout.
- Enhanced disabled Chip styling in ProductDetailPage to improve visibility and user experience.
---
 src/components/Content.js           |  3 ++-
 src/components/ProductDetailPage.js | 12 ++++++++++--
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/Content.js b/src/components/Content.js
index abba0d9..cb7c8fa 100644
--- a/src/components/Content.js
+++ b/src/components/Content.js
@@ -545,7 +545,8 @@ class Content extends Component {
                         height: 32,
                         display: 'flex',
                         alignItems: 'center',
-                        justifyContent: 'center'
+                        justifyContent: 'center',
+                        pointerEvents: 'none'
                       }}>
                         <KeyboardArrowUpIcon sx={{ color: 'white', fontSize: '1.2rem' }} />
                       </Box>
diff --git a/src/components/ProductDetailPage.js b/src/components/ProductDetailPage.js
index c3524d5..f7de9ad 100644
--- a/src/components/ProductDetailPage.js
+++ b/src/components/ProductDetailPage.js
@@ -827,7 +827,7 @@ class ProductDetailPage extends Component {
             {/* Attribute images and chips with action buttons */}
             {(attributes.some(attr => attributeImages[attr.kMerkmalWert]) || attributes.some(attr => !attributeImages[attr.kMerkmalWert])) && (
               <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", mb: 2, gap: 2 }}>
-                <Stack direction="row" spacing={2} sx={{ flexWrap: "wrap", gap: 1, flex: 1 }}>
+                <Stack direction="row" spacing={0} sx={{ flexWrap: "wrap", gap: 1, flex: 1 }}>
                   {attributes
                     .filter(attribute => attributeImages[attribute.kMerkmalWert])
                     .map((attribute) => {
@@ -850,7 +850,15 @@ class ProductDetailPage extends Component {
                         key={attribute.kMerkmalWert}
                         label={attribute.cWert}
                         disabled
-                        sx={{ mb: 1 }}
+                        sx={{
+                          '&.Mui-disabled': {
+                            opacity: 1, // ← Remove the "fog"
+                          },
+                          '& .MuiChip-label': {
+                            fontWeight: 'bold',
+                            color: 'inherit', // ← Keep normal text color
+                          },
+                        }}
                       />
                     ))}
                 </Stack>