From bea0fcbf755d10b5091bc4501615d813539e0adc Mon Sep 17 00:00:00 2001
From: Hrishikesh Vaipurkar <hrishikesh.vaipurkar@scandichotels.com>
Date: Thu, 15 May 2025 13:13:42 +0000
Subject: [PATCH] Merged in fix/SW-2451-destinations-mobile-sea (pull request
 #2106)

fix: SW-2451 Fixed iPhone rendering issue

* fix: SW-2451 Fixed iPhone rendering issue

* fix: SW-2451 Optimised code


Approved-by: Erik Tiekstra
---
 .../destinationSearch.module.css                 | 16 ++++++++++++++++
 .../DestinationSearch/index.tsx                  |  8 +++-----
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/destinationSearch.module.css b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/destinationSearch.module.css
index d7a8d5057..240b5246d 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/destinationSearch.module.css
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/destinationSearch.module.css
@@ -14,6 +14,10 @@
   text-align: left;
 }
 
+.displayAsPlaceholder {
+  color: var(--UI-Text-Placeholder);
+}
+
 .icon {
   background: var(--Base-Button-Primary-Fill-Normal);
   width: 40px;
@@ -88,3 +92,15 @@
     transform: translateY(0);
   }
 }
+
+@media screen and (max-width: 767px) {
+  .desktopSearch {
+    display: none;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  .mobileSearch {
+    display: none;
+  }
+}
diff --git a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/index.tsx b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/index.tsx
index 5ba0c41c1..ee63c6a42 100644
--- a/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/index.tsx
+++ b/apps/scandic-web/components/ContentType/DestinationPage/DestinationOverviewPage/DestinationSearch/index.tsx
@@ -8,7 +8,6 @@ import {
   ModalOverlay,
 } from "react-aria-components"
 import { useIntl } from "react-intl"
-import { useMediaQuery } from "usehooks-ts"
 
 import { IconButton } from "@scandic-hotels/design-system/IconButton"
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
@@ -20,11 +19,10 @@ import styles from "./destinationSearch.module.css"
 
 export function DestinationSearch() {
   const intl = useIntl()
-  const displayInModal = useMediaQuery("(max-width: 767px)")
 
   return (
     <>
-      <div hidden={!displayInModal}>
+      <div className={styles.mobileSearch}>
         <DialogTrigger>
           <Button className={styles.trigger}>
             <span>
@@ -36,7 +34,7 @@ export function DestinationSearch() {
                 </span>
               </Typography>
               <Typography variant="Body/Paragraph/mdRegular">
-                <span>
+                <span className={styles.displayAsPlaceholder}>
                   {intl.formatMessage({
                     defaultMessage: "Hotels & Destinations",
                   })}
@@ -72,7 +70,7 @@ export function DestinationSearch() {
           </ModalOverlay>
         </DialogTrigger>
       </div>
-      <div hidden={displayInModal}>
+      <div className={styles.desktopSearch}>
         <DestinationSearchForm />
       </div>
     </>