feat(SW-340): Fixed Map Link in desktop

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

@@ -9,17 +9,13 @@
   margin: 0 auto;
 }
 
-.section {
+.sideBar {
   display: flex;
   flex-direction: column;
+  max-width: 340px;
 }
 
 .link {
-  display: flex;
-  padding: var(--Spacing-x2) var(--Spacing-x0);
-}
-
-.mapContainer {
   display: none;
 }
 
@@ -34,11 +30,27 @@
 }
 
 @media (min-width: 768px) {
+  .link {
+    display: flex;
+    padding-bottom: var(--Spacing-x6);
+  }
   .mapContainer {
-    display: block;
+    display: flex;
+    flex-direction: column;
+    background: var(--Base-Surface-Primary-light-Normal);
+    border-radius: var(--Corner-radius-Medium);
+    border: 1px solid var(--Base-Border-Subtle);
+  }
+  .mapLinkText {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--Spacing-x-half);
+    padding: var(--Spacing-x-one-and-half) var(--Spacing-x0);
   }
   .main {
     flex-direction: row;
+    gap: var(--Spacing-x5);
   }
   .buttonContainer {
     display: none;

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

@@ -62,9 +62,14 @@ export default async function SelectHotelPage({
 
   return (
     <main className={styles.main}>
-      <section className={styles.section}>
+      <div className={styles.sideBar}>
-        <div className={styles.mapContainer}>
+        <Link
-          <Link href={selectHotelMap[params.lang]} keepSearchParams>
+          className={styles.link}
+          color="burgundy"
+          href={selectHotelMap[params.lang]}
+          keepSearchParams
+        >
+          <div className={styles.mapContainer}>
             <StaticMap
               city={searchParams.city}
               width={340}
@@ -73,20 +78,15 @@ export default async function SelectHotelPage({
               mapType="roadmap"
               altText={`Map of ${searchParams.city} city center`}
             />
-          </Link>
+            <div className={styles.mapLinkText}>
-          <Link
+              {intl.formatMessage({ id: "Show map" })}
-            className={styles.link}
+              <ChevronRightIcon color="burgundy" />
-            color="burgundy"
+            </div>
-            href={selectHotelMap[params.lang]}
+          </div>
-            keepSearchParams
+        </Link>
-          >
-            {intl.formatMessage({ id: "Show map" })}
-            <ChevronRightIcon color="burgundy" height={20} width={20} />
-          </Link>
-        </div>
         <MobileMapButtonContainer city={searchParams.city} />
         <HotelFilter filters={filterList} />
-      </section>
+      </div>
       <HotelCardListing hotelData={hotels} />
     </main>
   )