From 329d7629178659e560ac39a2e562c775208400da Mon Sep 17 00:00:00 2001
From: Christel Westerberg <christel.westerberg@scandichotels.com>
Date: Fri, 29 Nov 2024 14:58:13 +0100
Subject: [PATCH] fix: normalize page width

---
 .../(standard)/step/page.module.css           |  5 +---
 app/globals.css                               | 27 ++++++++++++++-----
 .../EnterDetails/Header/header.module.css     |  8 +++---
 3 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.module.css b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.module.css
index 7e9b5acf0..748b572ce 100644
--- a/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.module.css
+++ b/app/[lang]/(live)/(public)/hotelreservation/(standard)/step/page.module.css
@@ -1,6 +1,7 @@
 .container {
   display: grid;
   gap: var(--Spacing-x3) var(--Spacing-x9);
+  width: var(--max-width-page);
 }
 
 .content {
@@ -20,10 +21,6 @@
     grid-template-rows: auto 1fr;
     margin: var(--Spacing-x5) auto 0;
     /* simulates padding on viewport smaller than --max-width-navigation */
-    width: min(
-      calc(100dvw - (var(--Layout-Desktop-Margin-Margin-min) * 2)),
-      var(--max-width-navigation)
-    );
   }
 
   .content {
diff --git a/app/globals.css b/app/globals.css
index a266e9f31..486ad6cfc 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -104,6 +104,11 @@
   --max-width-text-block: 49.5rem;
   --current-mobile-site-header-height: 70.047px;
   --max-width-navigation: 89.5rem;
+  --max-width-spacing: calc(var(--Layout-Mobile-Margin-Margin-min) * 2);
+  --max-width-page: min(
+    calc(100dvw - var(--max-width-spacing)),
+    var(--max-width-navigation)
+  );
 
   --main-menu-mobile-height: 75px;
   --main-menu-desktop-height: 125px;
@@ -140,15 +145,25 @@ body {
 body.overflow-hidden {
   overflow: hidden;
 }
-@media screen and (min-width: 768px) {
-  body.overflow-hidden {
-    overflow: auto;
-    overflow-x: hidden;
-  }
-}
 
 ul {
   padding-inline-start: 0;
   margin-block-start: 0;
   margin-block-end: 0;
 }
+
+@media screen and (min-width: 768px) {
+  :root {
+    --max-width-spacing: calc(var(--Layout-Tablet-Margin-Margin-min) * 2);
+  }
+  body.overflow-hidden {
+    overflow: auto;
+    overflow-x: hidden;
+  }
+}
+
+@media screen and (min-width: 1367px) {
+  :root {
+    --max-width-spacing: calc(var(--Layout-Desktop-Margin-Margin-min) * 2);
+  }
+}
diff --git a/components/HotelReservation/EnterDetails/Header/header.module.css b/components/HotelReservation/EnterDetails/Header/header.module.css
index 32e4b0ae5..6e8a2b2ba 100644
--- a/components/HotelReservation/EnterDetails/Header/header.module.css
+++ b/components/HotelReservation/EnterDetails/Header/header.module.css
@@ -24,9 +24,9 @@
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
-  max-width: var(--max-width);
+  max-width: var(--max-width-page);
   gap: var(--Spacing-x2);
-  padding: var(--Spacing-x3) var(--Spacing-x2);
+  padding: var(--Spacing-x3) 0;
   margin: 0 auto;
 }
 
@@ -58,12 +58,12 @@
 
 @media (min-width: 768px) {
   .container {
-    padding: var(--Spacing-x3) var(--Spacing-x3);
+    padding: var(--Spacing-x3) 0;
   }
 }
 
 @media screen and (min-width: 1367px) {
   .container {
-    padding: var(--Spacing-x6) var(--Spacing-x5);
+    padding: var(--Spacing-x6) 0;
   }
 }