From 56193b082199a2b27630d5139b133003ab4b5e28 Mon Sep 17 00:00:00 2001
From: Pontus Dreij <pontus.dreij@scandichotels.com>
Date: Thu, 10 Oct 2024 14:26:48 +0200
Subject: [PATCH] fix(SW-592): Show search in mobile

---
 .../SearchList/Dialog/dialog.module.css       | 34 +++++++++++++------
 .../FormContent/Search/index.tsx              |  1 -
 .../FormContent/Search/search.module.css      |  1 +
 3 files changed, 24 insertions(+), 12 deletions(-)

diff --git a/components/Forms/BookingWidget/FormContent/Search/SearchList/Dialog/dialog.module.css b/components/Forms/BookingWidget/FormContent/Search/SearchList/Dialog/dialog.module.css
index e1ca8f23d..e41253da6 100644
--- a/components/Forms/BookingWidget/FormContent/Search/SearchList/Dialog/dialog.module.css
+++ b/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;
-  /** 
-   * 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));
-  width: 360px;
-  z-index: 99;
+  position: fixed;
+  top: 170px;
+  width: 100%;
+  height: calc(100% - 200px);
+  z-index: 10010;
 }
 
 .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;
+  }
+}
diff --git a/components/Forms/BookingWidget/FormContent/Search/index.tsx b/components/Forms/BookingWidget/FormContent/Search/index.tsx
index 98c5b36e8..af5f7ce3d 100644
--- a/components/Forms/BookingWidget/FormContent/Search/index.tsx
+++ b/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"
diff --git a/components/Forms/BookingWidget/FormContent/Search/search.module.css b/components/Forms/BookingWidget/FormContent/Search/search.module.css
index 7aa9cda02..d1acb79be 100644
--- a/components/Forms/BookingWidget/FormContent/Search/search.module.css
+++ b/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,