From 50eda049bf932f72b48a4027a5208a6dce049db5 Mon Sep 17 00:00:00 2001
From: Mohit5Upadhyay <upadhyaym7060@gmail.com>
Date: Mon, 7 Jul 2025 12:18:04 +0530
Subject: [PATCH 1/2] fix(docs): prevent search overlay overlapping branding on
 mobile  Closes #1660

---
 src/components/search.js | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/search.js b/src/components/search.js
index 8bf47d8495d..18973ee0a15 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -106,11 +106,22 @@ export const Mobile = ({
   const siteMetadata = useSiteMetadata()
   const getCloseAnimation = exit => (isForceClose ? undefined : {exit})
 
+  const handleSearchToggle = React.useCallback(() => {
+    setMobileSearchOpen(true)
+  }, [setMobileSearchOpen])
+
   return (
     <>
-      <Button aria-label="Search" aria-expanded={isMobileSearchOpen} onClick={() => setMobileSearchOpen(true)}>
-        <SearchIcon />
-      </Button>
+      {!isMobileSearchOpen && (
+        <Button 
+          aria-label="Search" 
+          aria-expanded={isMobileSearchOpen} 
+          onClick={handleSearchToggle}
+        >
+          <SearchIcon />
+        </Button>
+      )}
+
       <AnimatePresence>
         {isMobileSearchOpen ? (
           <FocusOn returnFocus={true} onEscapeKey={() => resetAndClose(true)}>
@@ -157,6 +168,8 @@ export const Mobile = ({
                     borderRightWidth: 0,
                     borderColor: 'border.muted',
                     position: 'relative',
+                    bg: 'canvas.default',
+                    zIndex: 9999, 
                   }}
                 >
                   <motion.div

From 099221c0f8e06cd725fb9297ca225edaa7a450da Mon Sep 17 00:00:00 2001
From: Mohit5Upadhyay <upadhyaym7060@gmail.com>
Date: Wed, 9 Jul 2025 13:21:47 +0530
Subject: [PATCH 2/2] refactor(docs): replace hard-coded z-index with constants
 for header/search overlay

---
 src/components/header.js | 4 ++--
 src/components/search.js | 6 +++---
 src/constants.js         | 5 +++++
 3 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/src/components/header.js b/src/components/header.js
index 404072cbbef..10be06bfd32 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -5,7 +5,7 @@ import * as Search from './search'
 import NavDrawer from './nav-drawer'
 import Link from './link'
 import useSearch from '../hooks/use-search'
-import {HEADER_HEIGHT, HEADER_BAR} from '../constants'
+import {HEADER_HEIGHT, HEADER_BAR, Z_INDEX} from '../constants'
 import headerNavItems from '../../content/header-nav.yml'
 import {DarkTheme} from '../theme'
 import SiteTitle from './site-title'
@@ -19,7 +19,7 @@ function Header() {
   const search = useSearch()
 
   return (
-    <DarkTheme sx={{top: 0, position: 'sticky', zIndex: 1}}>
+    <DarkTheme sx={{top: 0, position: 'sticky', zIndex: Z_INDEX.HEADER}}>
       <NpmHeaderBar />
       <Box
         as="header"
diff --git a/src/components/search.js b/src/components/search.js
index 18973ee0a15..330d7360d04 100644
--- a/src/components/search.js
+++ b/src/components/search.js
@@ -5,7 +5,7 @@ import {AnimatePresence, motion} from 'framer-motion'
 import {FocusOn} from 'react-focus-on'
 import TextInput from './text-input'
 import useSiteMetadata from '../hooks/use-site-metadata'
-import {HEADER_BAR, HEADER_HEIGHT} from '../constants'
+import {HEADER_BAR, HEADER_HEIGHT, Z_INDEX} from '../constants'
 import {LightTheme} from '../theme'
 import {LinkNoUnderline} from './link'
 import * as getNav from '../util/get-nav'
@@ -132,7 +132,7 @@ export const Mobile = ({
                 left: 0,
                 right: 0,
                 bottom: 0,
-                zIndex: 1,
+                zIndex: Z_INDEX.SEARCH_OVERLAY,
               }}
             >
               <Box
@@ -169,7 +169,7 @@ export const Mobile = ({
                     borderColor: 'border.muted',
                     position: 'relative',
                     bg: 'canvas.default',
-                    zIndex: 9999, 
+                    zIndex: Z_INDEX.SEARCH_OVERLAY + 1, 
                   }}
                 >
                   <motion.div
diff --git a/src/constants.js b/src/constants.js
index 70b9ad1adfb..2f1108ae5e1 100644
--- a/src/constants.js
+++ b/src/constants.js
@@ -11,3 +11,8 @@ export const SKIP_TO_CONTENT_ID = 'skip-to-content'
 export const SKIP_TO_SEARCH_ID = 'search-box-input'
 
 export const CLI_PATH = '/cli'
+
+export const Z_INDEX = {
+  HEADER: 10,
+  SEARCH_OVERLAY: 25
+}
\ No newline at end of file