From f49a13512af98231bb4edecc0da93893cbbac4e3 Mon Sep 17 00:00:00 2001
From: Arvid Norlin <arvid.norlin@scandichotels.com>
Date: Fri, 16 May 2025 08:51:49 +0000
Subject: [PATCH] Merged in fix/enter-details-header (pull request #2119)

fix: hide address and decrease title size on smaller devices

* fix(SW-2791): hide address and decrease title size on smaller devices


Approved-by: Tobias Johansson
---
 .../EnterDetails/Header/header.module.css     | 21 +++++++++++++++++--
 .../EnterDetails/Header/index.tsx             |  8 +++++++
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css
index 6e8a2b2ba..73a55d5ba 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/header.module.css
@@ -36,17 +36,25 @@
   gap: var(--Spacing-x-half);
 }
 
+.mobileTitle {
+  display: -webkit-box;
+}
+
+.mobileTitle,
 .title {
   overflow: hidden;
   text-overflow: ellipsis;
-  display: -webkit-box;
   -webkit-line-clamp: 2; /* number of lines to show */
   line-clamp: 2;
   -webkit-box-orient: vertical;
 }
 
+.title {
+  display: none;
+}
+
 .address {
-  display: flex;
+  display: none;
   flex-wrap: wrap;
   column-gap: var(--Spacing-x-one-and-half);
   font-style: normal;
@@ -57,9 +65,18 @@
 }
 
 @media (min-width: 768px) {
+  .address {
+    display: flex;
+  }
   .container {
     padding: var(--Spacing-x3) 0;
   }
+  .mobileTitle {
+    display: none;
+  }
+  .title {
+    display: -webkit-box;
+  }
 }
 
 @media screen and (min-width: 1367px) {
diff --git a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx
index f1d871fb8..1f2f572f7 100644
--- a/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx
+++ b/apps/scandic-web/components/HotelReservation/EnterDetails/Header/index.tsx
@@ -33,6 +33,14 @@ export default async function HotelHeader({
             <Title as="h1" level="h1" color="white" className={styles.title}>
               {hotel.name}
             </Title>
+            <Title
+              as="h2"
+              level="h1"
+              color="white"
+              className={styles.mobileTitle}
+            >
+              {hotel.name}
+            </Title>
             <div className={styles.address}>
               <Caption color="white">{addressStr}</Caption>
               {/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}