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

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

@@ -1,5 +1,5 @@
-.complete,
-.partial {
+.mobileToggleButton {
+  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,
-  .partial {
+  .mobileToggleButton {
     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}>