fix: header width and clamping

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