fix: SW-1010 Fixed low screen height accessibility issue

components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx

@@ -98,6 +98,7 @@ export default function ChildInfoSelector({
             {...register(ageFieldName, {
               required: true,
             })}
+            isNestedInModal={true}
           />
         </div>
         <div>
@@ -114,6 +115,7 @@ export default function ChildInfoSelector({
               {...register(bedFieldName, {
                 required: true,
               })}
+              isNestedInModal={true}
             />
           ) : null}
         </div>

components/GuestsRoomsPicker/Form.tsx

@@ -21,9 +21,11 @@ import { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
 export default function GuestsRoomsPickerDialog({
   rooms,
   onClose,
+  isOverflowed = false,
 }: {
   rooms: GuestsRoom[]
   onClose: () => void
+  isOverflowed?: boolean // ToDo Remove once Tooltip below is no longer required
 }) {
   const intl = useIntl()
   const doneLabel = intl.formatMessage({ id: "Done" })
@@ -124,7 +126,7 @@ export default function GuestsRoomsPickerDialog({
           <Tooltip
             heading={disabledBookingOptionsHeader}
             text={disabledBookingOptionsText}
-            position="bottom"
+            position={isOverflowed ? "top" : "bottom"}
             arrow="left"
           >
             {rooms.length < 4 ? (

components/GuestsRoomsPicker/index.tsx

@@ -1,6 +1,6 @@
 "use client"
 
-import { useEffect, useState } from "react"
+import { useCallback, useEffect, useState } from "react"
 import {
   Button,
   Dialog,
@@ -26,6 +26,8 @@ export default function GuestsRoomsPickerForm() {
 
   const checkIsDesktop = useMediaQuery("(min-width: 1367px)")
   const [isDesktop, setIsDesktop] = useState(true)
+  const [containerHeight, setContainerHeight] = useState(0)
+  const childCount = rooms[0] ? rooms[0].child.length : 0 // ToDo Update for multiroom later
 
   const htmlElement =
     typeof window !== "undefined" ? document.querySelector("body") : null
@@ -46,12 +48,55 @@ export default function GuestsRoomsPickerForm() {
     setIsDesktop(checkIsDesktop)
   }, [checkIsDesktop])
 
+  const updateHeight = useCallback(() => {
+    if (typeof window !== undefined) {
+      // Get available space for picker to show without going beyond screen
+      let maxHeight =
+        window.innerHeight -
+        (document.querySelector("#booking-widget")?.getBoundingClientRect()
+          .bottom ?? 0) -
+        50
+      const innerContainerHt = document
+        .querySelector(".react-aria-Popover")
+        ?.getBoundingClientRect().height
+      if (
+        maxHeight != containerHeight &&
+        innerContainerHt &&
+        maxHeight <= innerContainerHt
+      ) {
+        setContainerHeight(maxHeight)
+      } else if (
+        containerHeight &&
+        innerContainerHt &&
+        maxHeight > innerContainerHt
+      ) {
+        setContainerHeight(0)
+      }
+    }
+  }, [containerHeight])
+
+  useEffect(() => {
+    if (typeof window !== undefined && isDesktop) {
+      updateHeight()
+    }
+  }, [childCount, isDesktop, updateHeight])
+
   return isDesktop ? (
     <DialogTrigger onOpenChange={setOverflowClip}>
       <Trigger rooms={rooms} className={styles.triggerDesktop} />
-      <Popover placement="bottom start" offset={36}>
+      <Popover
+        placement="bottom start"
+        offset={36}
+        style={containerHeight ? { overflow: "auto" } : {}}
+      >
         <Dialog className={styles.pickerContainerDesktop}>
-          {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
+          {({ close }) => (
+            <PickerForm
+              rooms={rooms}
+              onClose={close}
+              isOverflowed={!!containerHeight}
+            />
+          )}
         </Dialog>
       </Popover>
     </DialogTrigger>