From f7cf1e9a2b885f9160f0e7fea87a975f4ab56da6 Mon Sep 17 00:00:00 2001
From: Tobias Johansson <tobias.johansson@scandichotels.com>
Date: Mon, 2 Dec 2024 15:25:38 +0100
Subject: [PATCH] fix(SW-1043): styling fixes

---
 .../hotelreservation/(standard)/step/page.module.css       | 1 +
 .../SectionAccordion/sectionAccordion.module.css           | 7 ++++---
 .../Form/Input/AriaInputWithLabel/input.module.css         | 1 +
 components/TempDesignSystem/Select/index.tsx               | 2 +-
 4 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.module.css
index d807e2633..16c0ca3b0 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.module.css
@@ -21,6 +21,7 @@
 
     grid-template-columns: 1fr 340px;
     grid-template-rows: auto 1fr;
+    width: var(--max-width-page);
     margin: var(--Spacing-x5) auto 0;
     /* simulates padding on viewport smaller than --max-width-navigation */
   }
diff --git a/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css b/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
index d895affd3..3314ff766 100644
--- a/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
+++ b/components/HotelReservation/EnterDetails/SectionAccordion/sectionAccordion.module.css
@@ -13,9 +13,6 @@
   grid-template-rows: var(--header-height) 0fr;
 
   column-gap: var(--Spacing-x-one-and-half);
-
-  transform-origin: top;
-  scroll-margin-top: 71px; /* booking widget height */
 }
 
 .accordion:last-child {
@@ -97,6 +94,10 @@
   transform-origin: top;
 }
 
+.accordion[data-open="true"] .content {
+  overflow: visible; /* DoB dropdowns needs to overflow in enter details step  */
+}
+
 @media screen and (min-width: 768px) {
   .accordion {
     column-gap: var(--Spacing-x3);
diff --git a/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css b/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css
index 6afcfd82a..aa7e157cb 100644
--- a/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css
+++ b/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css
@@ -6,6 +6,7 @@
   border-width: 1px;
   border-radius: var(--Corner-radius-Medium);
   display: grid;
+  min-width: 0; /* allow shrinkage */
   height: 60px;
   padding: var(--Spacing-x1) var(--Spacing-x2);
   transition: border-color 200ms ease;
diff --git a/components/TempDesignSystem/Select/index.tsx b/components/TempDesignSystem/Select/index.tsx
index 8226d1804..ff98c3e99 100644
--- a/components/TempDesignSystem/Select/index.tsx
+++ b/components/TempDesignSystem/Select/index.tsx
@@ -96,7 +96,7 @@ export default function Select({
             <ListBox className={styles.listBox}>
               {items.map((item) => (
                 <ListBoxItem
-                  aria-label={String(item)}
+                  aria-label={JSON.stringify(item)}
                   className={`${styles.listBoxItem} ${showRadioButton && styles.showRadioButton}`}
                   id={item.value}
                   key={item.label}