From 0b915db9eb55c2099ea5250078c814b1229a1416 Mon Sep 17 00:00:00 2001
From: sebseb7 <sebgreenbus@gmail.com>
Date: Thu, 20 Nov 2025 07:31:11 +0100
Subject: [PATCH] refactor(ProductDetailPage): improve layout and button
 functionality

- Adjusted layout to ensure a minimum height for attribute images and action buttons.
- Enhanced button functionality by updating the availability request button and ensuring proper alignment of action buttons.
- Cleaned up conditional rendering for attribute images to streamline the component's structure.
---
 src/components/ProductDetailPage.js | 94 +++++++++++++++--------------
 1 file changed, 48 insertions(+), 46 deletions(-)

diff --git a/src/components/ProductDetailPage.js b/src/components/ProductDetailPage.js
index 27a6ce0..474b9a2 100644
--- a/src/components/ProductDetailPage.js
+++ b/src/components/ProductDetailPage.js
@@ -1277,8 +1277,9 @@ 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 }}>
+          
+            <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 }}>
                   {attributes
                     .filter(attribute => attributeImages[attribute.kMerkmalWert])
@@ -1314,62 +1315,63 @@ class ProductDetailPage extends Component {
                       />
                     ))}
                 </Stack>
+              )}
                 
-                {/* Right-aligned action buttons */}
-                <Stack direction="column" spacing={1} sx={{ flexShrink: 0 }}>
+              {/* Right-aligned action buttons */}
+              <Stack direction="column" spacing={1} sx={{ flexShrink: 0 }}>
+                <Button
+                  variant="outlined"
+                  size="small"
+                  onClick={this.toggleQuestionForm}
+                  sx={{ 
+                    fontSize: "0.75rem",
+                    px: 1.5,
+                    py: 0.5,
+                    minWidth: "auto",
+                    whiteSpace: "nowrap"
+                  }}
+                >
+                  Frage zum Artikel
+                </Button>
+                <Button
+                  variant="outlined"
+                  size="small"
+                  onClick={this.toggleRatingForm}
+                  sx={{ 
+                    fontSize: "0.75rem",
+                    px: 1.5,
+                    py: 0.5,
+                    minWidth: "auto",
+                    whiteSpace: "nowrap"
+                  }}
+                >
+                  Artikel Bewerten
+                </Button>
+                {(product.available !== 1 && product.availableSupplier !== 1) && (
                   <Button
                     variant="outlined"
                     size="small"
-                    onClick={this.toggleQuestionForm}
+                    onClick={this.toggleAvailabilityForm}
                     sx={{ 
                       fontSize: "0.75rem",
                       px: 1.5,
                       py: 0.5,
                       minWidth: "auto",
-                      whiteSpace: "nowrap"
+                      whiteSpace: "nowrap",
+                      borderColor: "warning.main",
+                      color: "warning.main",
+                      "&:hover": {
+                        borderColor: "warning.dark",
+                        backgroundColor: "warning.light"
+                      }
                     }}
                   >
-                    Frage zum Artikel
+                    Verfügbarkeit anfragen
                   </Button>
-                  <Button
-                    variant="outlined"
-                    size="small"
-                    onClick={this.toggleRatingForm}
-                    sx={{ 
-                      fontSize: "0.75rem",
-                      px: 1.5,
-                      py: 0.5,
-                      minWidth: "auto",
-                      whiteSpace: "nowrap"
-                    }}
-                  >
-                    Artikel Bewerten
-                  </Button>
-                  {(product.available !== 1 && product.availableSupplier !== 1) && (
-                    <Button
-                      variant="outlined"
-                      size="small"
-                      onClick={this.toggleAvailabilityForm}
-                      sx={{ 
-                        fontSize: "0.75rem",
-                        px: 1.5,
-                        py: 0.5,
-                        minWidth: "auto",
-                        whiteSpace: "nowrap",
-                        borderColor: "warning.main",
-                        color: "warning.main",
-                        "&:hover": {
-                          borderColor: "warning.dark",
-                          backgroundColor: "warning.light"
-                        }
-                      }}
-                    >
-                      Verfügbarkeit anfragen
-                    </Button>
-                  )}
-                </Stack>
-              </Box>
-            )}
+                )}
+              </Stack>
+            </Box>
+
 
             {/* Weight */}
             {product.weight > 0 && (