fix: refactor GuestRoomsPicker to avoid performance bugs

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

@@ -1,9 +1,6 @@
 .container {
   overflow: hidden;
   position: relative;
-  &[data-isopen="true"] {
-    overflow: visible;
-  }
 }
 .roomContainer {
   display: grid;
@@ -14,9 +11,6 @@
   gap: var(--Spacing-x2);
   padding-bottom: var(--Spacing-x1);
 }
-.hideWrapper {
-  background-color: var(--Main-Grey-White);
-}
 .roomHeading {
   margin-bottom: var(--Spacing-x1);
 }
@@ -39,33 +33,25 @@
   margin-top: var(--Spacing-x2);
 }
 
-@media screen and (max-width: 1366px) {
-  .hideWrapper {
-    border-radius: var(--Corner-radius-Large) var(--Corner-radius-Large) 0 0;
-    bottom: 0;
-    left: 0;
-    position: fixed;
-    right: 0;
-    top: 100%;
-    transition: top 300ms ease;
-    z-index: 10002;
-    overflow: hidden;
-  }
+.pickerContainer {
+  --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;
+}
+@media screen and (max-width: 1366px) {
   .container[data-isopen="true"] .hideWrapper {
     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;
@@ -121,19 +107,6 @@
 }
 
 @media screen and (min-width: 1367px) {
-  .hideWrapper {
-    border-radius: var(--Corner-radius-Large);
-    box-shadow: 0px 0px 14px 6px rgba(0, 0, 0, 0.1);
-    left: calc((var(--Spacing-x1) + var(--Spacing-x2)) * -1);
-    max-width: calc(100vw - 20px);
-    padding: var(--Spacing-x2) var(--Spacing-x3);
-    position: absolute;
-    top: calc(100% + var(--Spacing-x2) + 1px + var(--Spacing-x4));
-    width: 360px;
-    max-height: calc(100dvh - 77px - var(--Spacing-x6));
-    overflow-y: auto;
-  }
-
   .header {
     display: none;
   }