From 88de7986f212b43e18ec847257124670c143881f Mon Sep 17 00:00:00 2001
From: Mike McDonald <mikeraymcdonald@gmail.com>
Date: Mon, 13 Feb 2023 11:49:55 -0600
Subject: [PATCH] fix home and navbar mobile layout

---
 theme/src/client/styles/home.scss   |  2 ++
 theme/src/client/styles/navbar.scss | 21 +++++++++++++++------
 theme/src/client/styles/search.scss | 10 ++++++++++
 3 files changed, 27 insertions(+), 6 deletions(-)

diff --git a/theme/src/client/styles/home.scss b/theme/src/client/styles/home.scss
index 63d4bc17..bb67f0eb 100644
--- a/theme/src/client/styles/home.scss
+++ b/theme/src/client/styles/home.scss
@@ -131,6 +131,7 @@
   .home {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
+    width: 100%;
 
     .features {
       flex-direction: column;
@@ -151,6 +152,7 @@
   .home {
     padding-left: 1.5rem;
     padding-right: 1.5rem;
+    width: 100%;
 
     .hero {
       img {
diff --git a/theme/src/client/styles/navbar.scss b/theme/src/client/styles/navbar.scss
index 9647c98f..50ccf491 100644
--- a/theme/src/client/styles/navbar.scss
+++ b/theme/src/client/styles/navbar.scss
@@ -80,11 +80,16 @@
 @media (max-width: $MQMobile) {
   .navbar {
     padding-left: 4rem;
+    padding-right: 2rem;
 
     .can-hide {
       display: none;
     }
 
+    .social-icon {
+        display: none;
+    }
+
     .site-name {
       width: calc(100vw - 9.4rem);
       overflow: hidden;
@@ -189,12 +194,6 @@
   }
 }
 
-@media screen and (max-width: $MQMobile) {
-  .toggle-sidebar-button {
-    display: block;
-  }
-}
-
 /**
  * toggle color mode button
  */
@@ -219,3 +218,13 @@
 .DocSearch {
   transition: background-color var(--t-color);
 }
+
+@media screen and (max-width: $MQMobile) {
+    .toggle-sidebar-button {
+      display: block;
+    }
+
+    .toggle-color-mode-button {
+        margin-left: 0.5rem;
+    }
+}
\ No newline at end of file
diff --git a/theme/src/client/styles/search.scss b/theme/src/client/styles/search.scss
index 774e2fc2..eee0d643 100644
--- a/theme/src/client/styles/search.scss
+++ b/theme/src/client/styles/search.scss
@@ -1,3 +1,5 @@
+@import '_variables';
+
 $input-color: #333;
 $input-background: #f6f9fc;
 $icon-color: darken($input-background, 30%);
@@ -117,6 +119,14 @@ $active-color: #1ea7fd;
   }
 }
 
+@media screen and (max-width: $MQMobile) {
+    .search-input-wrapper {
+        input[data-search-input='true'] {
+            width: 200px;
+        }
+    }
+  }
+
 /* Fix the X appearing in search field on Chrome and IE */
 input[type='search']::-ms-clear {
   display: none;