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

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;
+  }
+}

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>
     </>