feat(SW-344): Hotel list in mobile

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/hotelListing.module.css

@@ -2,6 +2,37 @@
   display: none;
 }
 
+.hotelListingMobile {
+  display: none;
+  align-items: flex-end;
+  overflow-x: auto;
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  height: 350px;
+  gap: var(--Spacing-x1);
+}
+
+.hotelListingMobile[data-open="true"] {
+  display: flex;
+}
+
+.hotelListingMobile dialog {
+  position: relative;
+  padding: 0;
+  margin: 0;
+}
+
+.hotelListingMobile > div:first-child {
+  margin-left: 16px;
+}
+
+.hotelListingMobile > div:last-child {
+  margin-right: 16px;
+}
+
 @media (min-width: 768px) {
   .hotelListing {
     display: block;
@@ -9,4 +40,9 @@
     overflow-y: auto;
     padding-top: var(--Spacing-x2);
   }
+
+  .hotelListingMobile,
+  .hotelListingMobile[data-open="true"] {
+    display: none;
+  }
 }

components/HotelReservation/SelectHotel/SelectHotelMap/HotelListing/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import HotelCardDialogListing from "@/components/HotelReservation/HotelCardDialogListing"
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 
 import styles from "./hotelListing.module.css"
@@ -13,13 +14,18 @@ export default function HotelListing({
   onHotelCardHover,
 }: HotelListingProps) {
   return (
-    <div className={styles.hotelListing}>
-      <HotelCardListing
-        hotelData={hotels}
-        type={HotelCardListingTypeEnum.MapListing}
-        activeCard={activeHotelPin}
-        onHotelCardHover={onHotelCardHover}
-      />
-    </div>
+    <>
+      <div className={styles.hotelListing}>
+        <HotelCardListing
+          hotelData={hotels}
+          type={HotelCardListingTypeEnum.MapListing}
+          activeCard={activeHotelPin}
+          onHotelCardHover={onHotelCardHover}
+        />
+      </div>
+      <div className={styles.hotelListingMobile} data-open={!!activeHotelPin}>
+        <HotelCardDialogListing hotels={hotels} activeCard={activeHotelPin} />
+      </div>
+    </>
   )
 }