feat(sw-343) added buttons to open map in mobile

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

@@ -2,5 +2,11 @@
   display: grid;
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
-  grid-template-columns: 420px 1fr;
+  position: relative;
+}
+
+@media (min-width: 768px) {
+  .main {
+    grid-template-columns: 420px 1fr;
+  }
 }

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

@@ -1,6 +1,6 @@
 .main {
   display: flex;
-  gap: var(--Spacing-x4);
+  gap: var(--Spacing-x3);
   padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
@@ -29,6 +29,10 @@
   margin-bottom: var(--Spacing-x3);
 }
 
+.button {
+  flex: 1;
+}
+
 @media (min-width: 768px) {
   .mapContainer {
     display: block;
@@ -36,4 +40,7 @@
   .main {
     flex-direction: row;
   }
+  .buttonContainer {
+    display: none;
+  }
 }

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -9,13 +9,13 @@ import {
 } from "@/app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/utils"
 import HotelCardListing from "@/components/HotelReservation/HotelCardListing"
 import HotelFilter from "@/components/HotelReservation/SelectHotel/HotelFilter"
+import MobileButtonContainer from "@/components/HotelReservation/SelectHotel/MobileButtonContainer"
 import {
   generateChildrenString,
   getHotelReservationQueryParams,
 } from "@/components/HotelReservation/SelectRate/RoomSelection/utils"
-import { ChevronRightIcon, MapIcon } from "@/components/Icons"
+import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
-import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
 import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
@@ -84,18 +84,7 @@ export default async function SelectHotelPage({
             <ChevronRightIcon color="burgundy" />
           </Link>
         </div>
-        <div className={styles.buttonContainer}>
-          <Button asChild variant="icon" intent="secondary" size="small">
-            <Link
-              prefetch={false}
-              color="none"
-              href={selectHotelMap[params.lang]}
-            >
-              <MapIcon color="burgundy" />
-              {intl.formatMessage({ id: "See on map" })}
-            </Link>
-          </Button>
-        </div>
+        <MobileButtonContainer city={searchParams.city} />
         <HotelFilter filters={filterList} />
       </section>
       <HotelCardListing hotelData={hotels} />