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

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) {

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