fix: remove guest picker store

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

@@ -1,7 +1,23 @@
-.container {
-  overflow: hidden;
-  position: relative;
+.triggerDesktop {
+  display: none;
 }
+
+.pickerContainerMobile {
+  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;
+  transition: top 300ms ease;
+  z-index: 1000;
+}
+
+.pickerContainerDesktop {
+  display: none;
+}
+
 .roomContainer {
   display: grid;
   gap: var(--Spacing-x2);
@@ -23,9 +39,7 @@
   width: 100%;
   text-align: left;
 }
-.body {
-  opacity: 0.8;
-}
+
 .footer {
   display: grid;
   gap: var(--Spacing-x1);
@@ -33,25 +47,7 @@
   margin-top: var(--Spacing-x2);
 }
 
-.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;
-  }
-
   .contentContainer {
     grid-area: content;
     overflow-y: scroll;
@@ -107,6 +103,32 @@
 }
 
 @media screen and (min-width: 1367px) {
+  .pickerContainerMobisse {
+    display: none;
+  }
+  .triggerMobile {
+    display: none;
+  }
+
+  .triggerDesktop {
+    display: block;
+  }
+
+  .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;
+  }
+
   .header {
     display: none;
   }