fix(SW-592): Show search in mobile

components/Forms/BookingWidget/FormContent/Search/SearchList/Dialog/dialog.module.css

@@ -1,23 +1,18 @@
 .dialog {
   background-color: var(--Base-Surface-Primary-light-Normal);
   border-radius: var(--Corner-radius-Large);
-  box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
+
   display: flex;
   flex-direction: column;
   left: 0;
   list-style: none;
-  max-height: 380px;
   overflow-y: auto;
   padding: var(--Spacing-x2) var(--Spacing-x3);
-  position: absolute;
+  position: fixed;
-  /** 
+  top: 170px;
-   * var(--Spacing-x4) to account for padding inside 
+  width: 100%;
-   * the bookingwidget and to add the padding for the
+  height: calc(100% - 200px);
-   * box itself 
+  z-index: 10010;
-   */
-  top: calc(100% + var(--Spacing-x4));
-  width: 360px;
-  z-index: 99;
 }
 
 .default {
@@ -31,3 +26,20 @@
 .search {
   gap: var(--Spacing-x3);
 }
+
+@media (min-width: 768px) {
+  .dialog {
+    position: absolute;
+    width: 360px;
+    /** 
+   * var(--Spacing-x4) to account for padding inside 
+   * the bookingwidget and to add the padding for the
+   * box itself 
+   */
+    top: calc(100% + var(--Spacing-x4));
+    z-index: 99;
+    box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
+    max-height: 380px;
+    height: auto;
+  }
+}

components/Forms/BookingWidget/FormContent/Search/index.tsx

@@ -10,7 +10,6 @@ import {
 import { useFormContext, useWatch } from "react-hook-form"
 import { useIntl } from "react-intl"
 
-import Body from "@/components/TempDesignSystem/Text/Body"
 import Caption from "@/components/TempDesignSystem/Text/Caption"
 
 import Input from "../Input"

components/Forms/BookingWidget/FormContent/Search/search.module.css

@@ -4,6 +4,7 @@
   border-width: 1px;
   border-radius: var(--Corner-radius-Small);
   padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
+  position: relative;
 }
 
 .container:hover,