From b95934f2920ced163162bdf7750e4f83e064f1a4 Mon Sep 17 00:00:00 2001
From: Paul Wackerow <54227730+wackerow@users.noreply.github.com>
Date: Tue, 29 Nov 2022 18:39:02 -0800
Subject: [PATCH] further mobile styling

---
 src/components/layouts/MobileMenu.tsx |  1 +
 src/theme/search.css                  | 18 +++++++++++++++++-
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/components/layouts/MobileMenu.tsx b/src/components/layouts/MobileMenu.tsx
index 7c8959b242..24797ab810 100644
--- a/src/components/layouts/MobileMenu.tsx
+++ b/src/components/layouts/MobileMenu.tsx
@@ -41,6 +41,7 @@ export const MobileMenu: React.FC = () => {
             border={BORDER_WIDTH}
             overflow='hidden'
             direction='column'
+            display={{ md: 'none' }}
           >
             <Flex borderBottom={BORDER_WIDTH} justify='flex-end'>
               {/* CLOSE ICON */}
diff --git a/src/theme/search.css b/src/theme/search.css
index ae9ae02e1a..e657829cc7 100644
--- a/src/theme/search.css
+++ b/src/theme/search.css
@@ -42,6 +42,10 @@
 }
 
 /* Algolia search modal styling */
+.DocSearch-Container {
+  z-index: 1400;
+}
+
 .DocSearch-Modal {
   border-radius: 0;
   background: var(--chakra-colors-bg);
@@ -127,8 +131,8 @@ svg[aria-label="Algolia"] * {
   font-size: var(--chakra-fontSizes-md)
 }
 
-/* Search field in mobile menu */
 @media (max-width: 768px) {
+  /* Search field in mobile menu */
   .DocSearch-Button {
     padding: 2rem 1rem;
     width: 100%;
@@ -145,7 +149,19 @@ svg[aria-label="Algolia"] * {
     padding: 2rem 1rem;
   }
 
+  .DocSearch-Button:active, .DocSearch-Button:focus, .DocSearch-Button:hover {
+    background: var(--chakra-colors-primary);
+  }
+
   .DocSearch-Search-Icon * {
     color: var(--chakra-colors-bg);
   }
+
+  /* Mobile modal styling */
+  .DocSearch-Container, .DocSearch-Modal {
+    position: fixed;
+    inset: 1rem 1.875rem;
+    max-width: calc(100vw - 3.75rem);
+    max-height: calc(100vh - 2rem);
+  }  
 }