fix(BOOK-498): removed and changed z-index values to have booking widget overlapping correctly on mobile.

Approved-by: Bianca Widstam
Approved-by: Hrishikesh Vaipurkar

apps/scandic-web/app/globals.css

@@ -15,6 +15,7 @@
   );
 
   --sitewide-alert-height: 0px; /* Will be overridden when a sitewide alert is visible */
+  --sitewide-alert-sticky-height: 0px; /* Will be overridden when a sticky sitewide alert is visible */
   --campaign-banner-height: 0px; /* Will be overridden when a campaign banner is visible */
   --alert-and-banner-height: calc(
     var(--sitewide-alert-height) + var(--campaign-banner-height)

apps/scandic-web/components/CampaignBanner/campaignBanner.module.css

@@ -1,6 +1,5 @@
 .campaignBanner {
   width: 100%;
-  z-index: var(--header-z-index);
   position: relative;
   background-color: var(--Surface-Brand-Primary-3-Default);
 }

apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/destinationSearch.module.css

@@ -48,7 +48,7 @@
   bottom: 0;
   left: 0;
   right: 0;
-  height: calc(100dvh - max(var(--alert-and-banner-height), 20px));
+  height: calc(100dvh - max(var(--sitewide-alert-sticky-height), 20px));
   border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
   background-color: var(--Surface-Primary-Default);
   box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);

apps/scandic-web/components/ContentType/StartPage/startPage.module.css

@@ -1,7 +1,6 @@
 .header {
   height: 560px;
   position: relative;
-  z-index: 10;
 }
 
 .header:after {
@@ -19,7 +18,6 @@
   color: var(--Text-Inverted);
   position: absolute;
   inset: 0;
-  z-index: 1;
   display: flex;
   align-items: center;
   justify-content: center;

packages/booking-flow/lib/components/BookingWidget/BookingWidgetForm/FormContent/Search/SearchList/Dialog/dialog.module.css

@@ -9,7 +9,7 @@
   overflow-y: auto;
   padding: var(--Spacing-x2) var(--Spacing-x3);
   position: fixed;
-  top: calc(140px + max(var(--alert-and-banner-height), 25px));
+  top: calc(140px + max(var(--sitewide-alert-sticky-height), 25px));
   width: 100%;
   height: calc(100% - 200px);
   z-index: 10010;

packages/booking-flow/lib/components/BookingWidget/Client.tsx

@@ -257,8 +257,8 @@ export default function BookingWidgetClient({
           </button>
           <Form type={type} onClose={closeMobileSearch} />
         </div>
+        <div className={styles.backdrop} onClick={closeMobileSearch} />
       </section>
-      <div className={styles.backdrop} onClick={closeMobileSearch} />
     </FormProvider>
   )
 }

packages/booking-flow/lib/components/BookingWidget/DatePicker/date-picker.module.css

@@ -46,7 +46,7 @@
 
   .container[data-datepicker-open="true"] .hideWrapper {
     border-radius: var(--Corner-radius-lg) var(--Corner-radius-lg) 0 0;
-    top: calc(max(var(--alert-and-banner-height), 20px));
+    top: calc(max(var(--sitewide-alert-sticky-height), 20px));
   }
 }
 

packages/booking-flow/lib/components/BookingWidget/FloatingBookingWidget/FloatingBookingWidget.module.css

@@ -2,7 +2,6 @@
   width: var(--max-width-content);
   margin: 0 auto;
   min-height: 88px;
-  z-index: 1000;
   position: relative;
 
   .floatingBackground {
@@ -20,7 +19,7 @@
       top: 0;
       left: 0;
       right: 0;
-      z-index: 1000;
+      z-index: var(--booking-widget-z-index);
       margin-top: var(--sitewide-alert-sticky-height);
       box-shadow: 0px 4px 24px 0px rgba(0, 0, 0, 0.05);
     }

packages/booking-flow/lib/components/BookingWidget/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -22,7 +22,7 @@
   left: 0;
   position: fixed;
   right: 0;
-  top: 20px;
+  top: calc(max(var(--sitewide-alert-sticky-height), 20px));
   transition: top 300ms ease;
   z-index: 100;
 }

packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/button.module.css

@@ -1,5 +1,5 @@
-.complete,
+.mobileToggleButton {
-.partial {
+  position: relative;
   border: none;
   align-items: center;
   box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.16);
@@ -7,7 +7,6 @@
   display: grid;
   gap: var(--Space-x15);
   padding: var(--Spacing-x2);
-  z-index: 1;
   background-color: var(--Base-Surface-Primary-light-Normal);
   width: 100%;
   /* In some cases the lingering pressend event will trigger the */
@@ -60,8 +59,7 @@
 }
 
 @media screen and (min-width: 768px) {
-  .complete,
+  .mobileToggleButton {
-  .partial {
     display: none;
   }
 }

packages/booking-flow/lib/components/BookingWidget/MobileToggleButton/index.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { cx } from "class-variance-authority"
 import { Button } from "react-aria-components"
 import { useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
@@ -96,7 +97,10 @@ export default function MobileToggleButton({
 
   return (
     <Button
-      className={locationAndDateIsSet ? styles.complete : styles.partial}
+      className={cx(
+        styles.mobileToggleButton,
+        locationAndDateIsSet ? styles.complete : styles.partial
+      )}
       onPress={openMobileSearch}
     >
       {!locationAndDateIsSet && (
@@ -185,7 +189,7 @@ export function MobileToggleButtonSkeleton() {
   const intl = useIntl()
 
   return (
-    <div className={styles.partial}>
+    <div className={cx(styles.mobileToggleButton, styles.partial)}>
       <span className={styles.block}>
         <Typography variant={"Body/Supporting text (caption)/smBold"}>
           <span className={styles.blockLabel}>

packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css

@@ -2,11 +2,30 @@
   position: sticky;
   z-index: var(--booking-widget-z-index);
   width: 100%;
-}
 
-/* Make sure Date Picker is placed on top of other sticky/fixed components */
+  &[data-booking-widget-open="true"] {
-.wrapper:has([data-datepicker-open="true"]) {
+    z-index: var(--booking-widget-open-z-index);
-  z-index: 100;
+    overflow-y: visible;
+
+    .formContainer {
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      z-index: 1;
+    }
+
+    .backdrop {
+      position: fixed;
+      inset: 0;
+      background-color: rgba(0, 0, 0, 0.4);
+      z-index: 0;
+    }
+  }
+
+  /* Make sure Date Picker is placed on top of other sticky/fixed components */
+  &:has([data-datepicker-open="true"]) {
+    z-index: var(--booking-widget-open-z-index);
+  }
 }
 
 .formContainer {
@@ -15,7 +34,7 @@
   background-color: var(--UI-Input-Controls-Surface-Normal);
   border-radius: 0;
   gap: var(--Spacing-x3);
-  height: calc(100dvh - max(var(--alert-and-banner-height), 20px));
+  height: calc(100dvh - max(var(--sitewide-alert-sticky-height), 20px));
   width: 100%;
   padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x7);
   position: fixed;
@@ -23,10 +42,10 @@
   bottom: -100%;
   overflow-y: auto;
   transition: bottom 300ms ease;
-}
 
-.formContainer:has([data-searchlist-open="true"]) {
+  &:has([data-searchlist-open="true"]) {
-  overflow-y: visible;
+    overflow-y: visible;
+  }
 }
 
 .compact {
@@ -41,16 +60,6 @@
   }
 }
 
-.wrapper[data-booking-widget-open="true"] {
-  z-index: var(--booking-widget-open-z-index);
-  overflow-y: visible;
-}
-
-.wrapper[data-booking-widget-open="true"] .formContainer {
-  left: 0;
-  bottom: 0;
-}
-
 .close {
   background: none;
   border: none;
@@ -59,16 +68,6 @@
   padding: 0;
 }
 
-.wrapper[data-booking-widget-open="true"] + .backdrop {
-  background-color: rgba(0, 0, 0, 0.4);
-  height: 100%;
-  left: 0;
-  position: absolute;
-  top: 0;
-  width: 100%;
-  z-index: calc(var(--booking-widget-open-z-index) - 1);
-}
-
 @media screen and (min-width: 768px) {
   .wrapper {
     top: 0;