feat(343): Style fixes on map

components/MapModal/index.tsx

@@ -1,43 +1,88 @@
 "use client"
 
 import { useRouter } from "next/navigation"
-import { useEffect, useRef, useState } from "react"
+import { useCallback, useEffect, useRef, useState } from "react"
 import { Dialog, Modal } from "react-aria-components"
 
+import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
+import { debounce } from "@/utils/debounce"
+
 import styles from "./mapModal.module.css"
 
 export function MapModal({ children }: { children: React.ReactNode }) {
   const router = useRouter()
+  const [mapHeight, setMapHeight] = useState("0px")
+  const [mapTop, setMapTop] = useState("0px")
+
   const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
-  const hasMounted = useRef(false)
+
+  const rootDiv = useRef<HTMLDivElement | null>(null)
 
   function onDismiss() {
     router.back()
   }
 
-  // Making sure the map is always opened at the top of the page, just below the header.
+  useHandleKeyUp((event: KeyboardEvent) => {
+    if (event.key === "Escape") {
+      onDismiss()
+    }
+  })
+
+  // Calculate the height of the map based on the viewport height from the start-point (below the header and booking widget)
+  const handleMapHeight = useCallback(() => {
+    const topPosition = rootDiv.current?.getBoundingClientRect().top ?? 0
+    const scrollY = window.scrollY
+    setMapHeight(`calc(100dvh - ${topPosition + scrollY}px)`)
+    setMapTop(`${topPosition + scrollY}px`)
+  }, [])
+
+  // Making sure the map is always opened at the top of the page,
+  // just below the header and booking widget as these should stay visible.
   // When closing, the page should scroll back to the position it was before opening the map.
   useEffect(() => {
     // Skip the first render
-    if (!hasMounted.current) {
-      hasMounted.current = true
+    if (!rootDiv.current) {
       return
     }
 
     if (scrollHeightWhenOpened === 0) {
-      setScrollHeightWhenOpened(window.scrollY)
+      const scrollY = window.scrollY
+      setScrollHeightWhenOpened(scrollY)
       window.scrollTo({ top: 0, behavior: "instant" })
     }
-  }, [scrollHeightWhenOpened])
+  }, [scrollHeightWhenOpened, rootDiv])
+
+  useEffect(() => {
+    const debouncedResizeHandler = debounce(function () {
+      handleMapHeight()
+    })
+
+    const observer = new ResizeObserver(debouncedResizeHandler)
+
+    observer.observe(document.documentElement)
+
+    return () => {
+      if (observer) {
+        observer.unobserve(document.documentElement)
+      }
+    }
+  }, [rootDiv, handleMapHeight])
 
   return (
-    <Modal isOpen={true}>
-      <Dialog className={styles.dynamicMap}>
-        {children}
-        <button onClick={onDismiss} className="close-button">
-          close
-        </button>
-      </Dialog>
-    </Modal>
+    <div className={styles.wrapper} ref={rootDiv}>
+      <Modal isOpen={true}>
+        <Dialog
+          style={
+            {
+              "--hotel-map-height": mapHeight,
+              "--hotel-map-top": mapTop,
+            } as React.CSSProperties
+          }
+          className={styles.dynamicMap}
+        >
+          {children}
+        </Dialog>
+      </Modal>
+    </div>
   )
 }

components/MapModal/mapModal.module.css

@@ -1,15 +1,21 @@
 .dynamicMap {
-  position: fixed;
-  top: calc(
-    var(--main-menu-mobile-height) + var(--booking-widget-mobile-height) - 4px
-  );
-  right: 0;
-  bottom: 0;
+  --hotel-map-height: 100dvh;
+  --hotel-map-top: 0px;
+  position: absolute;
+  top: var(--hotel-map-top);
   left: 0;
-  z-index: var(--dialog-z-index);
+  height: var(--hotel-map-height);
+  width: 100dvw;
+  z-index: var(--hotel-dynamic-map-z-index);
   display: flex;
+  flex-direction: column;
   background-color: var(--Base-Surface-Primary-light-Normal);
 }
+.wrapper {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 
 @media screen and (min-width: 768px) {
   .dynamicMap {