fix(SW-1043): styling fixes

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 */
   }

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);

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;

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}