fix(docs): prevent search overlay overlapping branding on mobile Closes #1660 (#1661)

Mohit5Upadhyay · web-flow · commit 0ce7b4b3d0c6 · 2025-07-10T07:13:46.000-07:00
## Description This PR fixes issue #1660 a mobile view bug where the search overlay was overlapping the “npm docs” logo, causing a cluttered visual appearance and also the search button will remain visible even when we click the search Button. ## Actual https://github.com/user-attachments/assets/6d9c1ce8-2e7d-400c-8bd2-938907987fa5 ## Updated https://github.com/user-attachments/assets/e17230f7-11d7-4d24-b101-669afd0e2538 ## References  Closes #1660
diff --git 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
@@ -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'
@@ -106,11 +106,18 @@ 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)}>
@@ -121,7 +128,7 @@ export const Mobile = ({
                 left: 0,
                 right: 0,
                 bottom: 0,
-                zIndex: 1,
+                zIndex: Z_INDEX.SEARCH_OVERLAY,
               }}
             >
               <Box
@@ -157,6 +164,8 @@ export const Mobile = ({
                     borderRightWidth: 0,
                     borderColor: 'border.muted',
                     position: 'relative',
+                    bg: 'canvas.default',
+                    zIndex: Z_INDEX.SEARCH_OVERLAY + 1,
                   }}
                 >
                   <motion.div
diff --git 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,
+}
