From f2a467af0d36e84957924a487170585ae9b3943e Mon Sep 17 00:00:00 2001
From: Chuma McPhoy <chuma.mcphoy@scandichotels.com>
Date: Wed, 19 Jun 2024 09:08:37 +0200
Subject: [PATCH] fix: use mobile header layout until desktop breakpoint

---
 .../Header/MainMenu/mainMenu.module.css       | 68 +++++++------------
 .../my-pages-mobile-dropdown.module.css       |  2 +-
 2 files changed, 24 insertions(+), 46 deletions(-)

diff --git a/components/Current/Header/MainMenu/mainMenu.module.css b/components/Current/Header/MainMenu/mainMenu.module.css
index 9b67a5abd..33972bb99 100644
--- a/components/Current/Header/MainMenu/mainMenu.module.css
+++ b/components/Current/Header/MainMenu/mainMenu.module.css
@@ -234,10 +234,6 @@
 }
 
 .buttonContainer {
-  /*display: flex;*/
-  /*justify-content: flex-end;*/
-  /*align-items: center;*/
-  /*margin-right: 8px;*/
   display: inline-flex;
   justify-content: flex-end;
   align-items: center;
@@ -245,13 +241,32 @@
   gap: var(--Spacing-x3);
 }
 
-@media screen and (min-width: 950px) {
+@media (min-width: 1200px) {
+  .navBar {
+    grid-template-columns: 140px auto 1fr;
+    height: 82.4px;
+    align-content: center;
+    padding: 0px 0px var(--Spacing-x-quarter) 0px;
+    overflow: hidden;
+  }
+
+  .logoLink {
+    display: inline-block;
+    width: 100%;
+    padding: 27px 30px 26px 0;
+    text-align: center;
+    align-items: center;
+  }
+
+  .listWrapper {
+  }
+
   .mainMenu {
     box-shadow: none;
     background-color: hsla(0, 0%, 100%, 0.95);
     position: relative;
     z-index: unset;
-    height: 85.09px;
+    height: 82.4px;
   }
 
   .container {
@@ -263,37 +278,21 @@
     background-color: transparent;
   }
 
-  .navBar {
-    grid-template-columns: 132.18px 1fr auto;
-    align-content: center;
-    /*padding-bottom: 2px;*/
-    padding: 0px 0px var(--Spacing-x-quarter) 0px;
-    overflow: hidden;
-  }
-
   .expanderBtn {
     display: none;
   }
 
-  .logoLink {
-    display: flex;
-    height: 100%;
-    padding: 30px 10px 30px 15px;
-    width: auto;
-    align-items: center;
-  }
-
   .logo {
     width: 102.17px;
     height: 100%;
-    padding-bottom: 4px; /* TODO: Needed? */
+    padding-bottom: 4px;
   }
 
   .listWrapper {
     border-top: none;
     display: flex;
     align-items: center;
-    padding-bottom: 0;
+    padding-top: 0;
     position: static;
     width: 100%;
   }
@@ -344,24 +343,3 @@
     display: none;
   }
 }
-
-@media (min-width: 1200px) {
-  .mainMenu {
-    height: 82.4px;
-  }
-  .navBar {
-    grid-template-columns: 140px auto 1fr;
-    height: 82.4px;
-  }
-
-  .logoLink {
-    display: inline-block;
-    width: 100%;
-    padding: 27px 30px 26px 0;
-    text-align: center;
-  }
-
-  .listWrapper {
-    padding-top: 0;
-  }
-}
diff --git a/components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css b/components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css
index a3b6c3081..e2938ec99 100644
--- a/components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css
+++ b/components/Current/Header/MyPagesMobileDropdown/my-pages-mobile-dropdown.module.css
@@ -44,7 +44,7 @@
   list-style: none;
 }
 
-@media screen and (min-width: 950px) {
+@media screen and (min-width: 1200px) {
   .navigationMenu {
     display: none;
   }