feat: SW-276 Updated UI and implement add room blocked tooltip

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

@@ -34,7 +34,7 @@
 .footer {
   display: grid;
   gap: var(--Spacing-x1);
-  grid-template-columns: auto;
+  grid-template-columns: auto auto;
   margin-top: var(--Spacing-x2);
 }
 
@@ -42,7 +42,6 @@
   .hideWrapper {
     bottom: 0;
     left: 0;
-    overflow: auto;
     position: fixed;
     right: 0;
     top: 100%;
@@ -51,12 +50,30 @@
   }
 
   .container[data-isopen="true"] .hideWrapper {
-    top: 0;
+    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
+    top: 20px;
+  }
+
+  .pickerContainer {
+    --header-height: 72px;
+    --sticky-button-height: 140px;
+    display: grid;
+    grid-template-areas:
+      "header"
+      "content";
+    grid-template-rows: var(--header-height) calc(100dvh - var(--header-height));
+    position: relative;
+  }
+  .contentContainer {
+    grid-area: content;
+    overflow-y: scroll;
+    scroll-snap-type: y mandatory;
   }
 
   .header {
     background-color: var(--Main-Grey-White);
     display: grid;
+    grid-area: header;
     padding: var(--Spacing-x3) var(--Spacing-x2);
   }
 
@@ -72,6 +89,9 @@
   .roomContainer {
     padding: 0 var(--Spacing-x2);
   }
+  .roomContainer:last-of-type {
+    padding-bottom: calc(var(--sticky-button-height) + 20px);
+  }
 
   .footer {
     background: linear-gradient(
@@ -80,7 +100,7 @@
       #ffffff 82.5%
     );
     padding: var(--Spacing-x1) var(--Spacing-x2) var(--Spacing-x7);
-    position: absolute;
+    position: sticky;
     bottom: 0;
     width: 100%;
     z-index: 10;
@@ -93,6 +113,10 @@
   .footer .hideOnMobile {
     display: none;
   }
+
+  .footer .addRoom {
+    justify-content: start;
+  }
 }
 
 @media screen and (min-width: 1367px) {