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

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/layout.module.css

@@ -2,7 +2,6 @@
   min-height: 100dvh;
   background-color: var(--Base-Background-Primary-Normal);
   position: relative;
-  z-index: var(--header-z-index);
 }
 
 @media screen and (min-width: 768px) {

components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx

@@ -65,7 +65,9 @@ export default function FilterAndSortModal({
 
   const handleApplyFiltersAndSorting = useCallback(
     (close: () => void) => {
-      if (sort === searchParams.get("sort")) return
+      if (sort === searchParams.get("sort")) {
+        close()
+      }
 
       const newSearchParams = new URLSearchParams(searchParams)
       newSearchParams.set("sort", sort)

components/HotelReservation/SelectHotel/SelectHotelMap/SelectHotelMapContainerSkeleton.module.css

@@ -1,6 +1,6 @@
 .container {
   max-width: var(--max-width);
-  height: 100%;
+  height: 100vh;
   display: flex;
   width: 100%;
 }
@@ -29,6 +29,9 @@
 }
 
 @media (min-width: 768px) {
+  .container {
+    height: 100%;
+  }
   .listingContainer {
     background-color: var(--Base-Surface-Secondary-light-Normal);
     padding: var(--Spacing-x3) var(--Spacing-x4);

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;
 }