Merged in fix/book-149-datepicker-overflowing (pull request #3433)

Fix/optimizations and cleanup of booking widget

* fix(BOOK-149):fixed issue with datepicker overflowing on months spanning more weeks

* fix(BOOK-149): added smooth scroll to age selector to avoid clipping the selector

* cleanup in trigger and css

* update to new Button componenet to fix missing focus indicator

* included color token in triggerbutton class instead


Approved-by: Bianca Widstam
Approved-by: Erik Tiekstra

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/ChildSelector/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useRef } from "react"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
 
@@ -30,6 +31,7 @@ export default function ChildSelector({
     defaultMessage: "Children (0–12 years)",
   })
   const { setValue } = useFormContext()
+  const agePickerRef = useRef<HTMLDivElement | null>(null)
 
   function increaseChildrenCount(roomIndex: number) {
     if (currentChildren.length < 5) {
@@ -67,12 +69,19 @@ export default function ChildSelector({
             decreaseChildrenCount(roomIndex)
           }}
           handleOnIncrease={() => {
+            requestAnimationFrame(() => {
+              agePickerRef.current?.scrollIntoView({
+                behavior: "smooth",
+                block: "center",
+              })
+            })
             increaseChildrenCount(roomIndex)
           }}
           disableDecrease={currentChildren.length == 0}
           disableIncrease={currentChildren.length == 5}
         />
       </section>
+      <span ref={agePickerRef} />
       {currentChildren.map((child, index) => (
         <ChildInfoSelector
           roomIndex={roomIndex}