fix: handle stickyness when scrolling is locked

components/GuestsRoomsPicker/index.tsx

@@ -20,22 +20,36 @@ import { GuestsRoom } from "@/types/components/bookingWidget/guestsRoomsPicker"
 
 export default function GuestsRoomsPickerForm() {
   const { watch } = useFormContext()
-
   const rooms = watch("rooms") as GuestsRoom[]
 
+  const htmlElement =
+    typeof window !== "undefined" ? document.querySelector("body") : null
+  //isOpen is the 'old state', so isOpen === true means "The modal is open and WILL be closed".
+  function setOverflowClip(isOpen: boolean) {
+    if (htmlElement) {
+      if (isOpen) {
+        htmlElement.style.overflow = "visible"
+      } else {
+        // !important needed to override 'overflow: hidden' set by react-aria.
+        // 'overflow: hidden' does not work in combination with other sticky positioned elements, which clip does.
+        htmlElement.style.overflow = "clip !important"
+      }
+    }
+  }
+
   return (
     <>
       <DialogTrigger>
         <Trigger rooms={rooms} className={styles.triggerMobile} />
-        <Modal className="my-modal">
+        <Modal>
           <Dialog className={styles.pickerContainerMobile}>
             {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
           </Dialog>
         </Modal>
       </DialogTrigger>
-      <DialogTrigger>
+      <DialogTrigger onOpenChange={setOverflowClip}>
         <Trigger rooms={rooms} className={styles.triggerDesktop} />
-        <Popover placement="bottom start" offset={22}>
+        <Popover placement="bottom start" offset={36}>
           <Dialog className={styles.pickerContainerDesktop}>
             {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
           </Dialog>