From 97964408abe7b4de496e5562f170cdef6b7f8504 Mon Sep 17 00:00:00 2001
From: Linus Flood <linus.flood@scandichotels.com>
Date: Fri, 16 May 2025 19:29:44 +0000
Subject: [PATCH] Merged in fix/bookingwidget-fixes (pull request #2135)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fix: (#SW-2663) bookingwidget mobile - Space around, border-radius and correct color on date field

* fix: booking widget mobile - padding around booking widget and date color

* Fixed rounded corners

* Reduced minimum size of column


Approved-by: Joakim Jäderberg
---
 .../FloatingBookingWidget/FloatingBookingWidget.module.css  | 6 ++++++
 .../BookingWidget/MobileToggleButton/button.module.css      | 3 ++-
 .../components/BookingWidget/MobileToggleButton/index.tsx   | 6 +++---
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/apps/scandic-web/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidget.module.css b/apps/scandic-web/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidget.module.css
index 5c86614fd..d57712de3 100644
--- a/apps/scandic-web/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidget.module.css
+++ b/apps/scandic-web/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidget.module.css
@@ -26,3 +26,9 @@
     }
   }
 }
+
+@media screen and (max-width: 767px) {
+  .floatingBookingWidget {
+    padding: 0 0.5rem;
+  }
+}
diff --git a/apps/scandic-web/components/BookingWidget/MobileToggleButton/button.module.css b/apps/scandic-web/components/BookingWidget/MobileToggleButton/button.module.css
index 30db1981d..d1ded62f8 100644
--- a/apps/scandic-web/components/BookingWidget/MobileToggleButton/button.module.css
+++ b/apps/scandic-web/components/BookingWidget/MobileToggleButton/button.module.css
@@ -15,6 +15,7 @@
   /* To avoid this "flash" the styling is set to transparent) */
   /* It is a non-standard css proprty, so shouldn't have too much of an effect on accessibility. */
   -webkit-tap-highlight-color: transparent;
+  border-radius: 10px;
 }
 
 .complete {
@@ -23,7 +24,7 @@
 
 .partial {
   grid-template-columns:
-    minmax(auto, 150px) min-content minmax(auto, 150px)
+    minmax(auto, 120px) min-content minmax(auto, 120px)
     auto;
 }
 
diff --git a/apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx b/apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx
index a20d45186..816401f2d 100644
--- a/apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx
+++ b/apps/scandic-web/components/BookingWidget/MobileToggleButton/index.tsx
@@ -119,7 +119,7 @@ export default function MobileToggleButton({
               <span className={styles.blockLabel}>{totalNightsMsg}</span>
             </Typography>
             <Typography variant={"Body/Paragraph/mdRegular"}>
-              <span>
+              <span className={styles.placeholder}>
                 {intl.formatMessage(
                   {
                     defaultMessage: "{selectedFromDate} - {selectedToDate}",
@@ -183,7 +183,7 @@ export function MobileToggleButtonSkeleton() {
             })}
           </span>
         </Typography>
-        <SkeletonShimmer display={"block"} height="24px" />
+        <SkeletonShimmer display={"block"} height="20px" width="11ch" />
       </span>
       <Divider color="baseSurfaceSubtleNormal" variant="vertical" />
       <span className={styles.block}>
@@ -198,7 +198,7 @@ export function MobileToggleButtonSkeleton() {
             )}
           </span>
         </Typography>
-        <SkeletonShimmer display={"block"} height="24px" />
+        <SkeletonShimmer display={"block"} height="20px" width="13ch" />
       </span>
       <span className={styles.icon}>
         <MaterialIcon icon="search" color="Icon/Inverted" />