feat(SW-344) Correct position of pins in mobile

components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -5,13 +5,7 @@ import { useCallback, useEffect, useRef } from "react"
 import HotelCardDialog from "../HotelCardDialog"
 import { getHotelPins } from "./utils"
 
-import type { HotelData } from "@/types/components/hotelReservation/selectHotel/hotelCardListingProps"
-
-interface HotelCardDialogListingProps {
-  hotels: HotelData[]
-  activeCard: string | null | undefined
-  onActiveCardChange: (hotelName: string | null) => void
-}
+import type { HotelCardDialogListingProps } from "@/types/components/hotelReservation/selectHotel/map"
 
 export default function HotelCardDialogListing({
   hotels,
@@ -20,6 +14,7 @@ export default function HotelCardDialogListing({
 }: HotelCardDialogListingProps) {
   const hotelsPinData = getHotelPins(hotels)
   const activeCardRef = useRef<HTMLDivElement | null>(null)
+  const observerRef = useRef<IntersectionObserver | null>(null)
 
   const handleIntersection = useCallback(
     (entries: IntersectionObserverEntry[]) => {
@@ -36,26 +31,36 @@ export default function HotelCardDialogListing({
   )
 
   useEffect(() => {
-    const observer = new IntersectionObserver(handleIntersection, {
+    observerRef.current = new IntersectionObserver(handleIntersection, {
       root: null,
-      threshold: 0.5, // Adjust threshold as needed
+      threshold: 0.5,
     })
 
     const elements = document.querySelectorAll("[data-name]")
-    elements.forEach((el) => observer.observe(el))
+    elements.forEach((el) => observerRef.current?.observe(el))
 
     return () => {
-      elements.forEach((el) => observer.unobserve(el))
+      elements.forEach((el) => observerRef.current?.unobserve(el))
+      observerRef.current?.disconnect()
     }
   }, [handleIntersection])
 
   useEffect(() => {
     if (activeCardRef.current) {
+      // Temporarily disconnect the observer
+      observerRef.current?.disconnect()
+
       activeCardRef.current.scrollIntoView({
         behavior: "smooth",
         block: "nearest",
         inline: "center",
       })
+
+      // Reconnect the observer after scrolling
+      const elements = document.querySelectorAll("[data-name]")
+      setTimeout(() => {
+        elements.forEach((el) => observerRef.current?.observe(el))
+      }, 500)
     }
   }, [activeCard])
 
@@ -73,7 +78,7 @@ export default function HotelCardDialogListing({
               <HotelCardDialog
                 data={data}
                 isOpen={!!activeCard}
-                handleClose={() => {}}
+                handleClose={() => onActiveCardChange(null)}
               />
             </div>
           )