fix: handle stickyness when scrolling is locked

components/GuestsRoomsPicker/Form.tsx

@@ -39,65 +39,68 @@ export default function GuestsRoomsPickerDialog({
 
   return (
     <>
-      <header className={styles.header}>
-        <button type="button" className={styles.close} onClick={onClose}>
-          <CloseLargeIcon />
-        </button>
-      </header>
-      <div className={styles.contentContainer}>
-        {rooms.map((room, index) => {
-          const currentAdults = room.adults
-          const currentChildren = room.child
-          const childrenInAdultsBed = currentChildren.filter(
-            (child) => child.bed === ChildBedMapEnum.IN_ADULTS_BED
-          ).length
+      <section className={styles.contentWrapper}>
+        <header className={styles.header}>
+          <button type="button" className={styles.close} onClick={onClose}>
+            <CloseLargeIcon />
+          </button>
+        </header>
+        <div className={styles.contentContainer}>
+          {rooms.map((room, index) => {
+            const currentAdults = room.adults
+            const currentChildren = room.child
+            const childrenInAdultsBed =
+              currentChildren.filter(
+                (child) => child.bed === ChildBedMapEnum.IN_ADULTS_BED
+              ).length ?? 0
 
-          return (
-            <div className={styles.roomContainer} key={index}>
-              <section className={styles.roomDetailsContainer}>
-                <Subtitle type="two" className={styles.roomHeading}>
-                  {roomLabel} {index + 1}
-                </Subtitle>
-                <AdultSelector
-                  roomIndex={index}
-                  currentAdults={currentAdults}
-                  currentChildren={currentChildren}
-                  childrenInAdultsBed={childrenInAdultsBed}
-                />
-                <ChildSelector
-                  roomIndex={index}
-                  currentAdults={currentAdults}
-                  currentChildren={currentChildren}
-                  childrenInAdultsBed={childrenInAdultsBed}
-                />
-              </section>
-              <Divider color="primaryLightSubtle" />
-            </div>
-          )
-        })}
-        <div className={styles.addRoomMobileContainer}>
-          <Tooltip
-            heading={disabledBookingOptionsHeader}
-            text={disabledBookingOptionsText}
-            position="top"
-            arrow="left"
-          >
-            {rooms.length < 4 ? (
-              <Button
-                intent="text"
-                variant="icon"
-                wrapping
-                disabled
-                theme="base"
-                fullWidth
-              >
-                <PlusIcon />
-                {addRoomLabel}
-              </Button>
-            ) : null}
-          </Tooltip>
+            return (
+              <div className={styles.roomContainer} key={index}>
+                <section className={styles.roomDetailsContainer}>
+                  <Subtitle type="two" className={styles.roomHeading}>
+                    {roomLabel} {index + 1}
+                  </Subtitle>
+                  <AdultSelector
+                    roomIndex={index}
+                    currentAdults={currentAdults}
+                    currentChildren={currentChildren}
+                    childrenInAdultsBed={childrenInAdultsBed}
+                  />
+                  <ChildSelector
+                    roomIndex={index}
+                    currentAdults={currentAdults}
+                    currentChildren={currentChildren}
+                    childrenInAdultsBed={childrenInAdultsBed}
+                  />
+                </section>
+                <Divider color="primaryLightSubtle" />
+              </div>
+            )
+          })}
+          <div className={styles.addRoomMobileContainer}>
+            <Tooltip
+              heading={disabledBookingOptionsHeader}
+              text={disabledBookingOptionsText}
+              position="top"
+              arrow="left"
+            >
+              {rooms.length < 4 ? (
+                <Button
+                  intent="text"
+                  variant="icon"
+                  wrapping
+                  disabled
+                  theme="base"
+                  fullWidth
+                >
+                  <PlusIcon />
+                  {addRoomLabel}
+                </Button>
+              ) : null}
+            </Tooltip>
+          </div>
         </div>
-      </div>
+      </section>
       <footer className={styles.footer}>
         <div className={styles.hideOnMobile}>
           <Tooltip