fix: handle stickyness when scrolling is locked

components/BookingWidget/Client.tsx

@@ -38,11 +38,11 @@ export default function BookingWidgetClient({
 
   const bookingWidgetSearchData: BookingWidgetSearchParams | undefined =
     searchParams
-      ? (getFormattedUrlQueryParams(new URLSearchParams(searchParams), {
+      ? getFormattedUrlQueryParams(new URLSearchParams(searchParams), {
           adults: "number",
           age: "number",
           bed: "number",
-        }) as BookingWidgetSearchParams)
+        })
       : undefined
 
   const getLocationObj = (destination: string): Location | undefined => {
@@ -75,6 +75,16 @@ export default function BookingWidgetClient({
       )
     : undefined
 
+  const defaultRoomsData = bookingWidgetSearchData?.room?.map((room) => ({
+    adults: room.adults,
+    child: room.child ?? [],
+  })) ?? [
+    {
+      adults: 1,
+      child: [],
+    },
+  ]
+
   const methods = useForm<BookingWidgetSchema>({
     defaultValues: {
       search: selectedLocation?.name ?? "",
@@ -92,12 +102,7 @@ export default function BookingWidgetClient({
       bookingCode: "",
       redemption: false,
       voucher: false,
-      rooms: bookingWidgetSearchData?.room ?? [
-        {
-          adults: 1,
-          child: [],
-        },
-      ],
+      rooms: defaultRoomsData,
     },
     shouldFocusError: false,
     mode: "all",

components/BookingWidget/bookingWidget.module.css

@@ -5,7 +5,7 @@
 
 .formContainer {
   display: grid;
-  grid-template-rows: 36px 1fr;
+  grid-template-rows: auto 1fr;
   background-color: var(--UI-Input-Controls-Surface-Normal);
   border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
   gap: var(--Spacing-x3);
@@ -30,6 +30,7 @@
   border: none;
   cursor: pointer;
   justify-self: flex-end;
+  padding: 0;
 }
 
 .wrapper[data-open="true"] + .backdrop {