Merged in fix/SW-2165-map-navigate-hotel-card (pull request #2246)

fix(SW-2165): map navigate on enter press 

* fix(SW-2165): navigate on enter press and refactor

* fix(SW-2165): responsive design

* fix(SW-2165): replace spacing variables

* fix(SW-2165): resolve pr comment

* fix(SW-2165): remove isOpen, hide/show logic already handled

* fix(SW-2165): remove dialog

* fix(SW-2165): use buttonicon

* fix(SW-2165): do not focus on close button without tab

* fix(SW-2165): remove unneccessary css


Approved-by: Christian Andolf

apps/scandic-web/components/HotelReservation/HotelCardDialogListing/hotelCardDialogListing.module.css

@@ -1,6 +1,5 @@
 .hotelCardDialogListing {
   display: flex;
-  flex-direction: row;
   gap: var(--Spacing-x1);
   align-items: flex-end;
   overflow-x: scroll;
@@ -17,13 +16,7 @@
   transform: translateZ(0);
 }
 
-.hotelCardDialogListing > div {
+.hotelCard {
   height: 100%;
   scroll-snap-align: center;
 }
-
-.hotelCardDialogListing dialog {
-  position: relative;
-  padding: 0;
-  margin: 0;
-}

apps/scandic-web/components/HotelReservation/HotelCardDialogListing/index.tsx

@@ -5,7 +5,7 @@ import { useIntl } from "react-intl"
 
 import { useHotelsMapStore } from "@/stores/hotels-map"
 
-import HotelCardDialog from "../HotelCardDialog"
+import ListingHotelCardDialog from "../HotelCardDialog/ListingHotelCardDialog"
 import { getHotelPins } from "./utils"
 
 import styles from "./hotelCardDialogListing.module.css"
@@ -127,13 +127,9 @@ export default function HotelCardDialogListing({
             key={data.name}
             ref={isActive ? activeCardRef : null}
             data-name={data.name}
+            className={styles.hotelCard}
           >
-            <HotelCardDialog
-              data={data}
-              isOpen={!!activeHotel}
-              handleClose={deactivate}
-              type="listing"
-            />
+            <ListingHotelCardDialog data={data} handleClose={deactivate} />
           </div>
         )
       })}