fixes

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.module.css

@@ -17,13 +17,10 @@
 
 @media screen and (min-width: 1367px) {
   .container {
-    width: var(--max-width-page);
-
     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 */
   }
 
   .content {

components/HotelReservation/EnterDetails/SectionAccordion/index.tsx

@@ -1,5 +1,5 @@
 "use client"
-import { useCallback, useEffect, useRef, useState } from "react"
+import { useEffect, useState } from "react"
 import { useIntl } from "react-intl"
 
 import { useEnterDetailsStore } from "@/stores/enter-details"
@@ -7,61 +7,13 @@ import { useEnterDetailsStore } from "@/stores/enter-details"
 import { CheckIcon, ChevronDownIcon } from "@/components/Icons"
 import Footnote from "@/components/TempDesignSystem/Text/Footnote"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import useScrollToActiveSection from "@/hooks/booking/useScrollToActiveSection"
 
 import styles from "./sectionAccordion.module.css"
 
 import type { SectionAccordionProps } from "@/types/components/hotelReservation/selectRate/sectionAccordion"
 import { StepEnum } from "@/types/enums/step"
 
-function useScrollToActiveSection(
-  step: StepEnum,
-  steps: StepEnum[],
-  isActive: boolean
-) {
-  const handleScroll = useCallback(() => {
-    const isMobile = window.matchMedia("(max-width: 768px)").matches
-    if (!isMobile) return
-
-    const currentElement = document.querySelector<HTMLElement>(
-      `[data-step="${step}"]`
-    )
-    const prevOpenElement =
-      document.querySelector<HTMLElement>(`[data-open="true"]`)
-
-    const currentStepIndex = steps.indexOf(step)
-    const prevStep = prevOpenElement?.dataset.step as StepEnum
-    const prevStepIndex = steps.indexOf(prevStep)
-
-    if (currentElement) {
-      const BOOKING_WIDGET_OFFSET = 71
-
-      const prevElementContent = prevOpenElement?.querySelector("header + div")
-
-      let collapsedSpace = 0
-      if (prevElementContent && prevStepIndex < currentStepIndex) {
-        collapsedSpace = prevElementContent.clientHeight
-      }
-
-      const currentElementTop =
-        currentElement.getBoundingClientRect().top + window.scrollY
-
-      const scrollTarget = Math.round(
-        currentElementTop - BOOKING_WIDGET_OFFSET - collapsedSpace
-      )
-
-      window.scrollTo({
-        top: scrollTarget,
-        behavior: "smooth",
-      })
-    }
-  }, [step, steps])
-
-  useEffect(() => {
-    if (!isActive) return
-    handleScroll()
-  }, [isActive, handleScroll])
-}
-
 export default function SectionAccordion({
   children,
   header,

components/TempDesignSystem/Select/index.tsx

@@ -96,7 +96,7 @@ export default function Select({
             <ListBox className={styles.listBox}>
               {items.map((item) => (
                 <ListBoxItem
-                  aria-label={JSON.stringify(item)}
+                  aria-label={item.label}
                   className={`${styles.listBoxItem} ${showRadioButton && styles.showRadioButton}`}
                   id={item.value}
                   key={item.label}

hooks/booking/useScrollToActiveSection.ts

@@ -0,0 +1,56 @@
+import { useCallback, useEffect } from "react"
+import { useMediaQuery } from "usehooks-ts"
+
+import { StepEnum } from "@/types/enums/step"
+
+export default function useScrollToActiveSection(
+  step: StepEnum,
+  steps: StepEnum[],
+  isActive: boolean
+) {
+  const isMobile = useMediaQuery("(max-width: 768px)")
+
+  const handleScroll = useCallback(() => {
+    if (!isMobile) {
+      return
+    }
+
+    const currentElement = document.querySelector<HTMLElement>(
+      `[data-step="${step}"]`
+    )
+    const prevOpenElement =
+      document.querySelector<HTMLElement>(`[data-open="true"]`)
+
+    const currentStepIndex = steps.indexOf(step)
+    const prevStep = prevOpenElement?.dataset.step as StepEnum
+    const prevStepIndex = steps.indexOf(prevStep)
+
+    if (currentElement) {
+      const BOOKING_WIDGET_OFFSET = 71
+
+      const prevElementContent = prevOpenElement?.querySelector("header + div")
+
+      let collapsedSpace = 0
+      if (prevElementContent && prevStepIndex < currentStepIndex) {
+        collapsedSpace = prevElementContent.clientHeight
+      }
+
+      const currentElementTop =
+        currentElement.getBoundingClientRect().top + window.scrollY
+
+      const scrollTarget = Math.round(
+        currentElementTop - BOOKING_WIDGET_OFFSET - collapsedSpace
+      )
+
+      window.scrollTo({
+        top: scrollTarget,
+        behavior: "smooth",
+      })
+    }
+  }, [step, steps, isMobile])
+
+  useEffect(() => {
+    if (!isActive) return
+    handleScroll()
+  }, [isActive, handleScroll])
+}