feat(SW-189): design changes to static map

app/globals.css

@@ -107,6 +107,7 @@
 
   --main-menu-mobile-height: 75px;
   --main-menu-desktop-height: 118px;
+  --booking-widget-desktop-height: 95px;
   --hotel-page-map-desktop-width: 23.75rem;
 
   /* Z-INDEX */

components/ContentType/HotelPage/Map/MapCard/mapCard.module.css

@@ -1,13 +1,13 @@
 .mapCard {
   display: grid;
   position: absolute;
-  bottom: 15%;
-  left: var(--Spacing-x2);
-  right: var(--Spacing-x2);
+  bottom: 0;
+  left: 0;
+  right: 0;
   background-color: var(--Base-Surface-Primary-light-Normal);
   padding: var(--Spacing-x2);
-  box-shadow: 0 0 2.5rem 0 rgba(0, 0, 0, 0.12);
-  border-radius: var(--Corner-radius-Medium);
+  border-top-left-radius: var(--Corner-radius-Medium);
+  border-top-right-radius: var(--Corner-radius-Medium);
 }
 
 .ctaButton {

components/ContentType/HotelPage/Map/StaticMap/index.tsx

@@ -18,9 +18,9 @@ export default async function StaticMap({
 }: StaticMapProps) {
   const intl = await getIntl()
   const mapId = env.GOOGLE_STATIC_MAP_ID
-  const mapHeight = 785
+  const mapHeight = 640
   const markerHeight = 100
-  const mapLatitudeInPx = mapHeight * 0.2
+  const mapLatitudeInPx = mapHeight * 0.25
   const mapCoordinates = {
     lat: calculateLatWithOffset(coordinates.lat, mapLatitudeInPx, zoomLevel),
     lng: coordinates.lng,

components/ContentType/HotelPage/hotelPage.module.css

@@ -40,16 +40,28 @@
   }
   .mainSection {
     grid-area: mainSection;
-    padding: var(--Spacing-x6) var(--Spacing-x4) 0;
+    padding: var(--Spacing-x6) var(--Spacing-x4);
   }
   .mapContainer {
     display: flex;
     grid-area: mapContainer;
     align-self: start;
-    position: sticky;
-    top: 0;
     justify-content: center;
     width: 100%;
+    height: 100%;
+    background-color: var(--Base-Surface-Primary-light-Normal);
+  }
+
+  .mapWithCard {
+    position: sticky;
+    top: 0;
+    min-height: 500px; /* Fixed min to not cover the marker with the card */
+    height: calc(
+      100vh - var(--main-menu-desktop-height) -
+        var(--booking-widget-desktop-height)
+    ); /* Full height without the header + booking widget */
+    max-height: 935px; /* Fixed max according to figma */
+    overflow: hidden;
   }
 
   .pageContainer > nav {

components/ContentType/HotelPage/index.tsx

@@ -124,8 +124,10 @@ export default async function HotelPage() {
       {googleMapsApiKey ? (
         <>
           <aside className={styles.mapContainer}>
-            <StaticMap coordinates={coordinates} hotelName={hotelName} />
-            <MapCard hotelName={hotelName} pois={topThreePois} />
+            <div className={styles.mapWithCard}>
+              <StaticMap coordinates={coordinates} hotelName={hotelName} />
+              <MapCard hotelName={hotelName} pois={topThreePois} />
+            </div>
           </aside>
           <MobileMapToggle />
           <DynamicMap