From a2c10149c8a690695b312ddabb11ab58fa7bb056 Mon Sep 17 00:00:00 2001
From: Massimo De Marchi <massimo@inkofpixel.com>
Date: Tue, 9 Jan 2024 16:31:05 +0100
Subject: [PATCH 1/2] fix(product page): Add overflow hidden to prevent weird
 overflow

This fixes a weird iOS Safari bug where the select would take up extra space if a long text option is selected
---
 .../product/sections/ProductOverviewSection/ProductOptions.tsx   | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/templates/product/sections/ProductOverviewSection/ProductOptions.tsx b/frontend/templates/product/sections/ProductOverviewSection/ProductOptions.tsx
index 94fb2c96..5c427834 100644
--- a/frontend/templates/product/sections/ProductOverviewSection/ProductOptions.tsx
+++ b/frontend/templates/product/sections/ProductOverviewSection/ProductOptions.tsx
@@ -58,6 +58,7 @@ export function ProductOptions({
                   {selectorType === SelectorType.SELECT && (
                      <Select
                         bg="white"
+                        overflowX="hidden"
                         value={selected}
                         onChange={(event) => {
                            onChange(event.target.value);

From 287aa4a82253bc70a23562b679e9bb4c9e6c00ea Mon Sep 17 00:00:00 2001
From: Massimo De Marchi <massimo@inkofpixel.com>
Date: Tue, 9 Jan 2024 16:31:28 +0100
Subject: [PATCH 2/2] refactor(product page): Remove unnecessary HStack

---
 .../ProductOverviewSection/ProductOptions.tsx       | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/frontend/templates/product/sections/ProductOverviewSection/ProductOptions.tsx b/frontend/templates/product/sections/ProductOverviewSection/ProductOptions.tsx
index 5c427834..95dbdeaa 100644
--- a/frontend/templates/product/sections/ProductOverviewSection/ProductOptions.tsx
+++ b/frontend/templates/product/sections/ProductOverviewSection/ProductOptions.tsx
@@ -3,7 +3,6 @@ import {
    BoxProps,
    Circle,
    Flex,
-   HStack,
    Image,
    Select,
    SimpleGrid,
@@ -48,13 +47,11 @@ export function ProductOptions({
             const selectorType = getSelectorType(option);
             return (
                <VStack align="stretch" key={option.id}>
-                  <HStack>
-                     <Text fontWeight="medium" color="gray.800">
-                        {option.name}
-                        {selectorType === SelectorType.SINGLE &&
-                           `: ${option.values[0]}`}
-                     </Text>
-                  </HStack>
+                  <Text fontWeight="medium" color="gray.800">
+                     {option.name}
+                     {selectorType === SelectorType.SINGLE &&
+                        `: ${option.values[0]}`}
+                  </Text>
                   {selectorType === SelectorType.SELECT && (
                      <Select
                         bg="white"