feat: add mobile ui to calendar

components/Forms/BookingWidget/FormContent/formContent.module.css

@@ -1,45 +1,80 @@
-.input {
-  display: flex;
-  gap: var(--Spacing-x2);
-}
-
-.input input[type="text"] {
-  border: none;
-  height: 24px;
-}
-
-.rooms,
-.vouchers,
-.when,
-.where {
-  border-right: 1px solid var(--Base-Surface-Subtle-Normal);
-  width: 100%;
-}
-
-.rooms,
-.when {
-  max-width: 240px;
-  padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
-}
-
-.vouchers {
-  max-width: 200px;
-  padding: var(--Spacing-x1) 0;
-}
-
-.where {
-  max-width: 280px;
-  position: relative;
-}
-
 .options {
   display: flex;
   flex-direction: column;
   justify-content: center;
   width: 100%;
-  max-width: 158px;
 }
 
 .option {
   display: flex;
-}
+}
+
+@media screen and (max-width: 1366px) {
+  .input {
+    display: grid;
+    gap: var(--Spacing-x2);
+  }
+
+  .rooms,
+  .vouchers,
+  .when,
+  .where {
+    background-color: var(--Base-Background-Primary-Normal);
+    border-radius: var(--Corner-radius-Medium);
+  }
+
+  .rooms,
+  .vouchers,
+  .when {
+    padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  }
+
+  .options {
+    gap: var(--Spacing-x2);
+    margin-top: var(--Spacing-x2);
+  }
+
+  .option {
+    gap: var(--Spacing-x2);
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  .input {
+    display: flex;
+    gap: var(--Spacing-x2);
+  }
+
+  .rooms,
+  .vouchers,
+  .when,
+  .where {
+    border-right: 1px solid var(--Base-Surface-Subtle-Normal);
+    width: 100%;
+  }
+
+  .input input[type="text"] {
+    border: none;
+    height: 24px;
+  }
+
+  .rooms,
+  .when {
+    max-width: 240px;
+    padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  }
+
+  .vouchers {
+    max-width: 200px;
+    padding: var(--Spacing-x1) 0;
+  }
+
+  .where {
+    max-width: 280px;
+    position: relative;
+  }
+
+  .options {
+    max-width: 158px;
+  }
+}