From dbf6dbb137d4673fdc0254db58f379c80663cede Mon Sep 17 00:00:00 2001
From: Hossein Mehrabi <ohyeaross@gmail.com>
Date: Mon, 10 Oct 2022 11:19:41 +0330
Subject: [PATCH] fix mobile header layout

---
 src/theme/Layout/styles.scss                           |  6 ++++++
 src/theme/Navbar/Content/styles.module.scss            | 10 ++++++----
 src/theme/Navbar/index.scss                            |  1 -
 .../SearchResultsContainer.module.scss                 |  2 +-
 4 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/src/theme/Layout/styles.scss b/src/theme/Layout/styles.scss
index 31c1d94..2c6c56e 100644
--- a/src/theme/Layout/styles.scss
+++ b/src/theme/Layout/styles.scss
@@ -23,6 +23,12 @@
   background-color: var(--ifm-background-surface-color);
 }
 
+:root {
+  body {
+    overflow-x: hidden !important;
+  }
+}
+
 @include utils.responsive('lg', 'down') {
   .background-underlay {
     display: none;
diff --git a/src/theme/Navbar/Content/styles.module.scss b/src/theme/Navbar/Content/styles.module.scss
index 90a7e4d..548ccf0 100644
--- a/src/theme/Navbar/Content/styles.module.scss
+++ b/src/theme/Navbar/Content/styles.module.scss
@@ -112,16 +112,16 @@
 @include utils.responsive('lg', 'down') {
   .root {
     padding: 0 var(--ifm-spacing-horizontal);
-    overflow: hidden;
   }
 
   .root > * {
     width: auto;
-    flex: 0 0 auto !important;
+    flex: 0 0 auto;
     padding: 0;
   }
 
-  .headerLeft {
+  .root > div:first-child {
+    flex: 0 0 auto;
   }
 
   .headerMiddle {
@@ -233,7 +233,7 @@ Hide color mode toggle in small viewports
 .mobileSearchContainer {
   top: 0;
   left: 0;
-  width: 100%;
+  width: 100% !important;
   height: 100%;
   position: absolute;
 
@@ -253,6 +253,8 @@ Hide color mode toggle in small viewports
 .headerRightMobile {
   display: none !important;
   visibility: hidden;
+
+  flex-grow: 1 !important;
 }
 
 @include utils.responsive('lg', 'down') {
diff --git a/src/theme/Navbar/index.scss b/src/theme/Navbar/index.scss
index d00c116..1575746 100644
--- a/src/theme/Navbar/index.scss
+++ b/src/theme/Navbar/index.scss
@@ -11,7 +11,6 @@
   --ifm-navbar-padding-vertical: 0.5rem;
 
   background: none;
-  overflow: hidden;
 }
 
 :root {
diff --git a/src/theme/SearchBar/SearchResultsContainer/SearchResultsContainer.module.scss b/src/theme/SearchBar/SearchResultsContainer/SearchResultsContainer.module.scss
index 91fcb5a..7f0cf98 100644
--- a/src/theme/SearchBar/SearchResultsContainer/SearchResultsContainer.module.scss
+++ b/src/theme/SearchBar/SearchResultsContainer/SearchResultsContainer.module.scss
@@ -24,7 +24,7 @@
 
 @include utils.responsive('lg', 'down') {
   .root {
-    width: 100vw;
+    width: 100%;
     margin-top: 0;
     border-radius: 0;
   }