fix: handle stickyness when scrolling is locked

components/GuestsRoomsPicker/guests-rooms-picker.module.css

@@ -3,15 +3,24 @@
 }
 
 .pickerContainerMobile {
+  --header-height: 72px;
+  --sticky-button-height: 140px;
   background-color: var(--Main-Grey-White);
   border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
   bottom: 0;
   left: 0;
   position: fixed;
   right: 0;
-  top: 0;
+  top: 20px;
   transition: top 300ms ease;
-  z-index: 1000;
+  z-index: 100;
+}
+.contentWrapper {
+  display: grid;
+  grid-template-areas:
+    "header"
+    "content";
+  grid-template-rows: var(--header-height) calc(100dvh - var(--header-height));
 }
 
 .pickerContainerDesktop {
@@ -44,7 +53,6 @@
   display: grid;
   gap: var(--Spacing-x1);
   grid-template-columns: auto;
-  margin-top: var(--Spacing-x2);
 }
 
 @media screen and (max-width: 1366px) {
@@ -55,7 +63,6 @@
   }
 
   .header {
-    background-color: var(--Main-Grey-White);
     display: grid;
     grid-area: header;
     padding: var(--Spacing-x3) var(--Spacing-x2);
@@ -83,11 +90,10 @@
       rgba(255, 255, 255, 0) 7.5%,
       #ffffff 82.5%
     );
-    padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
+    padding: var(--Spacing-x2) var(--Spacing-x2) var(--Spacing-x7);
     position: sticky;
     bottom: 0;
     width: 100%;
-    z-index: 10;
   }
 
   .footer .hideOnMobile {
@@ -103,9 +109,17 @@
 }
 
 @media screen and (min-width: 1367px) {
-  .pickerContainerMobisse {
+  .pickerContainerMobile {
     display: none;
   }
+  .contentWrapper {
+    grid-template-rows: auto;
+  }
+
+  .contentContainer {
+    overflow-y: visible;
+  }
+
   .triggerMobile {
     display: none;
   }
@@ -117,24 +131,27 @@
   .pickerContainerDesktop {
     --header-height: 72px;
     --sticky-button-height: 140px;
+
     background-color: var(--Main-Grey-White);
     display: grid;
-
     border-radius: var(--Corner-radius-Large);
     box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
-
     max-width: calc(100vw - 20px);
     padding: var(--Spacing-x2) var(--Spacing-x3);
-
     width: 360px;
   }
 
+  .pickerContainerDesktop:focus-visible {
+    outline: none;
+  }
+
   .header {
     display: none;
   }
 
   .footer {
     grid-template-columns: auto auto;
+    padding-top: var(--Spacing-x2);
   }
 
   .footer .hideOnDesktop,