feat(SW-344): Hotel list in mobile

components/Maps/InteractiveMap/HotelListingMapContent/hotelListingMapContent.module.css

@@ -8,6 +8,10 @@
   min-width: 109px !important; /* Overwriting the default width of the @vis.gl/react-google-maps AdvancedMarker */
 }
 
+.dialogContainer {
+  display: none;
+}
+
 .pin {
   position: absolute;
   top: 0;
@@ -67,3 +71,9 @@
 .card.active {
   display: block;
 }
+
+@media (min-width: 768px) {
+  .dialogContainer {
+    display: block;
+  }
+}

components/Maps/InteractiveMap/HotelListingMapContent/index.tsx

@@ -50,17 +50,18 @@ export default function HotelListingMapContent({
               )
             }
           >
-            <HotelCardDialog
-              isOpen={isActiveOrHovered}
-              handleClose={(event: { stopPropagation: () => void }) => {
-                event.stopPropagation()
-                if (activeHotelPin === pin.name) {
-                  toggleActiveHotelPin(null)
-                }
-              }}
-              pin={pin}
-            />
-
+            <div className={styles.dialogContainer}>
+              <HotelCardDialog
+                isOpen={isActiveOrHovered}
+                handleClose={(event: { stopPropagation: () => void }) => {
+                  event.stopPropagation()
+                  if (activeHotelPin === pin.name) {
+                    toggleActiveHotelPin(null)
+                  }
+                }}
+                data={pin}
+              />
+            </div>
             <span
               className={`${styles.pin} ${isActiveOrHovered ? styles.active : ""}`}
             >