fix(SW-983): Fixed bug with hotel card in map

components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -1,10 +1,15 @@
 "use client"
 
 import { useCallback, useEffect, useRef } from "react"
+import { useMediaQuery } from "usehooks-ts"
+
+import useClickOutside from "@/hooks/useClickOutside"
 
 import HotelCardDialog from "../HotelCardDialog"
 import { getHotelPins } from "./utils"
 
+import styles from "./hotelCardDialogListing.module.css"
+
 import type { HotelCardDialogListingProps } from "@/types/components/hotelReservation/selectHotel/map"
 
 export default function HotelCardDialogListing({
@@ -15,6 +20,12 @@ export default function HotelCardDialogListing({
   const hotelsPinData = getHotelPins(hotels)
   const activeCardRef = useRef<HTMLDivElement | null>(null)
   const observerRef = useRef<IntersectionObserver | null>(null)
+  const dialogRef = useRef<HTMLDivElement>(null)
+  const isMobile = useMediaQuery("(max-width: 768px)")
+
+  useClickOutside(dialogRef, !!activeCard && isMobile, () => {
+    onActiveCardChange(null)
+  })
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
@@ -65,7 +76,7 @@ export default function HotelCardDialogListing({
   }, [activeCard])
 
   return (
-    <>
+    <div className={styles.hotelCardDialogListing} ref={dialogRef}>
       {hotelsPinData?.length &&
         hotelsPinData.map((data) => {
           const isActive = data.name === activeCard
@@ -83,6 +94,6 @@ export default function HotelCardDialogListing({
             </div>
           )
         })}
-    </>
+    </div>
   )
 }