style(SW-593): adjustments to z-index

components/ContentType/HotelPage/Map/MobileMapToggle/index.tsx

@@ -1,6 +1,4 @@
 "use client"
-
-import { useCallback, useEffect, useRef, useState } from "react"
 import { useIntl } from "react-intl"
 
 import useHotelPageStore from "@/stores/hotel-page"
@@ -14,60 +12,32 @@ export default function MobileMapToggle() {
   const { isDynamicMapOpen, openDynamicMap, closeDynamicMap } =
     useHotelPageStore()
 
-  const mapToggleRef = useRef<HTMLDivElement>(null)
-  const [isVisible, setIsVisible] = useState<boolean>(true)
-
-  const handleScroll = useCallback(() => {
-    if (mapToggleRef.current) {
-      const rect = mapToggleRef.current.getBoundingClientRect()
-      if (rect.top >= 150) {
-        setIsVisible(true)
-      } else {
-        setIsVisible(false)
-      }
-    }
-  }, [])
-
-  useEffect(() => {
-    handleScroll()
-
-    window.addEventListener("scroll", handleScroll)
-
-    return () => {
-      window.removeEventListener("scroll", handleScroll)
-    }
-  }, [handleScroll])
-
   return (
-    <div ref={mapToggleRef} className={styles.wrapper}>
+    <div className={styles.mobileToggle}>
-      <div
+      <button
-        className={`${styles.mobileToggle} ${isVisible ? "" : styles.hidden}`}
+        type="button"
+        className={`${styles.button} ${!isDynamicMapOpen ? styles.active : ""}`}
+        onClick={closeDynamicMap}
       >
-        <button
+        <HouseIcon
-          type="button"
+          color={!isDynamicMapOpen ? "white" : "red"}
-          className={`${styles.button} ${!isDynamicMapOpen ? styles.active : ""}`}
+          height={24}
-          onClick={closeDynamicMap}
+          width={24}
-        >
+        />
-          <HouseIcon
+        <span>{intl.formatMessage({ id: "Hotel" })}</span>
-            color={!isDynamicMapOpen ? "white" : "red"}
+      </button>
-            height={24}
+      <button
-            width={24}
+        type="button"
-          />
+        className={`${styles.button} ${isDynamicMapOpen ? styles.active : ""}`}
-          <span>{intl.formatMessage({ id: "Hotel" })}</span>
+        onClick={openDynamicMap}
-        </button>
+      >
-        <button
+        <MapIcon
-          type="button"
+          color={isDynamicMapOpen ? "white" : "red"}
-          className={`${styles.button} ${isDynamicMapOpen ? styles.active : ""}`}
+          height={24}
-          onClick={openDynamicMap}
+          width={24}
-        >
+        />
-          <MapIcon
+        <span>{intl.formatMessage({ id: "Map" })}</span>
-            color={isDynamicMapOpen ? "white" : "red"}
+      </button>
-            height={24}
-            width={24}
-          />
-          <span>{intl.formatMessage({ id: "Map" })}</span>
-        </button>
-      </div>
     </div>
   )
 }

components/ContentType/HotelPage/Map/MobileMapToggle/mobileToggle.module.css

@@ -1,11 +1,5 @@
-.wrapper {
-  margin: 0 auto;
-  position: sticky;
-  bottom: var(--Spacing-x5);
-  z-index: 1;
-}
-
 .mobileToggle {
+  position: sticky;
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--Spacing-x-half);
@@ -14,6 +8,9 @@
   background-color: var(--Base-Surface-Primary-light-Normal);
   box-shadow: 0 0 30px 2px rgba(0, 0, 0, 0.15);
   padding: var(--Spacing-x-half);
+  margin: 0 auto;
+  bottom: var(--Spacing-x5);
+  z-index: 1;
 }
 
 .button {
@@ -43,12 +40,8 @@
   background-color: var(--Primary-Strong-Surface-Hover);
 }
 
-.hidden {
-  display: none;
-}
-
 @media screen and (min-width: 1367px) {
-  .wrapper {
+  .mobileToggle {
     display: none;
   }
 }

components/ContentType/HotelPage/TabNavigation/tabNavigation.module.css

@@ -1,7 +1,7 @@
 .stickyWrapper {
   position: sticky;
   top: var(--booking-widget-mobile-height);
-  z-index: 1;
+  z-index: 2;
   background-color: var(--Base-Surface-Subtle-Normal);
   border-bottom: 1px solid var(--Base-Border-Subtle);
   overflow-x: auto;

components/ContentType/HotelPage/hotelPage.module.css

@@ -11,6 +11,7 @@
     "mapContainer";
   margin: 0 auto;
   max-width: var(--max-width);
+  z-index: 0;
 }
 
 .hotelImages {