fix(SW-1111) fix filter button and filter flimmer in mobile

components/MapContainer/index.tsx

@@ -9,6 +9,7 @@ import styles from "./mapModal.module.css"
 export function MapContainer({ children }: { children: React.ReactNode }) {
   const [mapHeight, setMapHeight] = useState("0px")
   const [mapTop, setMapTop] = useState("0px")
+  const [mapZIndex, setMapZIndex] = useState(0)
   const [scrollHeightWhenOpened, setScrollHeightWhenOpened] = useState(0)
 
   const rootDiv = useRef<HTMLDivElement | null>(null)
@@ -19,6 +20,7 @@ export function MapContainer({ children }: { children: React.ReactNode }) {
     const scrollY = window.scrollY
     setMapHeight(`calc(100dvh - ${topPosition + scrollY}px)`)
     setMapTop(`${topPosition + scrollY}px`)
+    setMapZIndex(11)
   }, [])
 
   useEffect(() => {
@@ -92,6 +94,7 @@ export function MapContainer({ children }: { children: React.ReactNode }) {
           {
             "--hotel-map-height": mapHeight,
             "--hotel-map-top": mapTop,
+            "--hotel-dynamic-map-z-index": mapZIndex,
           } as React.CSSProperties
         }
         className={styles.dynamicMap}

components/MapContainer/mapModal.module.css

@@ -1,6 +1,7 @@
 .dynamicMap {
   --hotel-map-height: 100dvh;
-  --hotel-map-top: 0px;
+  --hotel-map-top: 145px;
+  --hotel-dynamic-map-z-index: 2;
   position: fixed;
   top: var(--hotel-map-top);
   left: 0;
@@ -15,4 +16,6 @@
   position: absolute;
   top: 0;
   left: 0;
+  height: 100vh;
+  right: 0;
 }