fix: validation

components/GuestsRoomsPicker/index.tsx

@@ -9,6 +9,7 @@ import {
 } from "react-aria-components"
 import { useFormContext } from "react-hook-form"
 import { useIntl } from "react-intl"
+import { useMediaQuery } from "usehooks-ts"
 
 import Body from "@/components/TempDesignSystem/Text/Body"
 
@@ -22,6 +23,8 @@ export default function GuestsRoomsPickerForm() {
   const { watch } = useFormContext()
   const rooms = watch("rooms") as GuestsRoom[]
 
+  const isDesktop = useMediaQuery("(min-width: 1367px)")
+
   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".
@@ -37,25 +40,24 @@ export default function GuestsRoomsPickerForm() {
     }
   }
 
-  return (
-    <>
-      <DialogTrigger>
-        <Trigger rooms={rooms} className={styles.triggerMobile} />
-        <Modal>
-          <Dialog className={styles.pickerContainerMobile}>
-            {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
-          </Dialog>
-        </Modal>
-      </DialogTrigger>
-      <DialogTrigger onOpenChange={setOverflowClip}>
-        <Trigger rooms={rooms} className={styles.triggerDesktop} />
-        <Popover placement="bottom start" offset={36}>
-          <Dialog className={styles.pickerContainerDesktop}>
-            {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
-          </Dialog>
-        </Popover>
-      </DialogTrigger>
-    </>
+  return isDesktop ? (
+    <DialogTrigger onOpenChange={setOverflowClip}>
+      <Trigger rooms={rooms} className={styles.triggerDesktop} />
+      <Popover placement="bottom start" offset={36}>
+        <Dialog className={styles.pickerContainerDesktop}>
+          {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
+        </Dialog>
+      </Popover>
+    </DialogTrigger>
+  ) : (
+    <DialogTrigger>
+      <Trigger rooms={rooms} className={styles.triggerMobile} />
+      <Modal>
+        <Dialog className={styles.pickerContainerMobile}>
+          {({ close }) => <PickerForm rooms={rooms} onClose={close} />}
+        </Dialog>
+      </Modal>
+    </DialogTrigger>
   )
 }