fix: header width and clamping

app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.module.css

@@ -21,11 +21,15 @@
     margin: var(--Spacing-x5) auto 0;
     /* simulates padding on viewport smaller than --max-width-navigation */
     width: min(
-      calc(100dvw - (var(--Spacing-x2) * 2)),
+      calc(100dvw - (var(--Layout-Desktop-Margin-Margin-min) * 2)),
       var(--max-width-navigation)
     );
   }
 
+  .content {
+    margin: var(--Spacing-x3) 0 0;
+  }
+
   .summary {
     position: static;
     display: grid;

components/HotelReservation/EnterDetails/Header/header.module.css

@@ -15,13 +15,19 @@
 
 .wrapper {
   position: relative;
-  padding: var(--Spacing-x3) var(--Spacing-x2);
   background-color: rgba(57, 57, 57, 0.5);
+  width: 100dvw;
+}
+
+.container {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
+  max-width: var(--max-width);
   gap: var(--Spacing-x2);
+  padding: var(--Spacing-x3) var(--Spacing-x2);
+  margin: 0 auto;
 }
 
 .titleContainer {
@@ -30,9 +36,19 @@
   gap: var(--Spacing-x-half);
 }
 
+.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;
+}
+
 .address {
   display: flex;
-  gap: var(--Spacing-x-one-and-half);
+  flex-wrap: wrap;
+  column-gap: var(--Spacing-x-one-and-half);
   font-style: normal;
 }
 
@@ -41,13 +57,13 @@
 }
 
 @media (min-width: 768px) {
-  .wrapper {
+  .container {
     padding: var(--Spacing-x3) var(--Spacing-x3);
   }
 }
 
 @media screen and (min-width: 1367px) {
-  .wrapper {
+  .container {
     padding: var(--Spacing-x6) var(--Spacing-x5);
   }
 }

components/HotelReservation/EnterDetails/Header/index.tsx

@@ -25,28 +25,30 @@ export default async function HotelHeader({ hotelData }: HotelHeaderProps) {
         width={1196}
       />
       <div className={styles.wrapper}>
-        <div className={styles.titleContainer}>
+        <div className={styles.container}>
-          <Title as="h1" level="h1" color="white">
+          <div className={styles.titleContainer}>
-            {hotel.name}
+            <Title as="h1" level="h1" color="white" className={styles.title}>
-          </Title>
+              {hotel.name}
-          <address className={styles.address}>
+            </Title>
-            <Caption color="white">
+            <address className={styles.address}>
-              {hotel.address.streetAddress}, {hotel.address.city}
+              <Caption color="white">
-            </Caption>
+                {hotel.address.streetAddress}, {hotel.address.city}
-            <Caption color="white">∙</Caption>
+              </Caption>
-            <Caption color="white">
+              <Caption color="white">∙</Caption>
-              {intl.formatMessage(
+              <Caption color="white">
-                { id: "Distance in km to city centre" },
+                {intl.formatMessage(
-                {
+                  { id: "Distance in km to city centre" },
-                  number: getSingleDecimal(
+                  {
-                    hotel.location.distanceToCentre / 1000
+                    number: getSingleDecimal(
-                  ),
+                      hotel.location.distanceToCentre / 1000
-                }
+                    ),
-              )}
+                  }
-            </Caption>
+                )}
-          </address>
+              </Caption>
+            </address>
+          </div>
+          <ToggleSidePeek hotelId={hotel.operaId} />
         </div>
-        <ToggleSidePeek hotelId={hotel.operaId} />
       </div>
     </header>
   )