fix: SW-1010 Fixed low screen height accessibility issue

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>