scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
Approved-by: Bianca Widstam
Approved-by: Hrishikesh Vaipurkar
This commit is contained in:
Erik Tiekstra
2025-11-07 13:03:25 +00:00
parent 0d479eb337
commit cab85f3ffd
12 changed files with 43 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/booking-flow/lib/components/BookingWidget/bookingWidget.module.css
+27 -28
View File
@@ -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 */
.wrapper:has([data-datepicker-open="true"]) {
z-index: 100;
&[data-booking-widget-open="true"] {
z-index: var(--booking-widget-open-z-index);
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"]) {
overflow-y: visible;
&:has([data-searchlist-open="true"]) {
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;