fix(BOOK-711): Added isFloating prop to decide when the booking widget should have a border radius

Approved-by: Bianca Widstam

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

@@ -1,4 +1,4 @@
-.wrapper {
+.bookingWidgetContainer {
   position: sticky;
   z-index: var(--booking-widget-z-index);
   width: 100%;
@@ -14,7 +14,9 @@
       z-index: 1;
       transform: translateY(0);
       visibility: visible;
+      border-radius: var(--Corner-Radius-lg);
     }
+
     @media screen and (max-width: 767px) {
       .backdrop {
         position: fixed;
@@ -30,13 +32,16 @@
   &:has([data-rooms-open="true"]) {
     z-index: var(--booking-widget-open-z-index);
   }
+
+  &.floating .formContainer {
+    border-radius: var(--Corner-Radius-lg);
+  }
 }
 
 .formContainer {
   display: grid;
   grid-template-rows: auto 1fr;
   background-color: var(--UI-Input-Controls-Surface-Normal);
-  border-radius: 0;
   gap: var(--Space-x3);
   height: calc(100dvh - max(var(--sitewide-alert-sticky-height), 20px));
   width: 100%;
@@ -53,18 +58,6 @@
   }
 }
 
-.compact {
-  .formContainer {
-    border-radius: var(--Corner-Radius-lg);
-  }
-}
-
-@media screen and (max-width: 767px) {
-  .formContainer {
-    border-radius: var(--Corner-Radius-lg) var(--Corner-Radius-lg) 0 0;
-  }
-}
-
 .close {
   background: none;
   border: none;
@@ -74,7 +67,7 @@
 }
 
 @media screen and (min-width: 768px) {
-  .wrapper {
+  .bookingWidgetContainer {
     top: 0;
   }