fix(docs): prevent search overlay overlapping branding on mobile Closes #1660 (#1661)
<!-- What / Why --> <!-- Describe the request in detail. What it does and why it's being changed. --> ## 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 <!-- Examples: Related to #0 Depends on #0 Blocked by #0 Fixes #0 Closes #0 --> Closes #1660
Mohit5Upadhyay committed
Jul 10, 2025 at 19:43 UTC
0ce7b4b3d0c6f238c8d9cd420693ed07a65382b5
3 files changed
+21
-7
src/components/header.js
+2
-2
@@ -5,7 +5,7 @@ import * as Search from './search'
5
import NavDrawer from './nav-drawer'
6
import Link from './link'
7
import useSearch from '../hooks/use-search'
8
-import {HEADER_HEIGHT, HEADER_BAR} from '../constants'
8
+import {HEADER_HEIGHT, HEADER_BAR, Z_INDEX} from '../constants'
9
import headerNavItems from '../../content/header-nav.yml'
10
import {DarkTheme} from '../theme'
11
import SiteTitle from './site-title'
@@ -19,7 +19,7 @@ function Header() {
19
const search = useSearch()
20
21
return (
22
- <DarkTheme sx={{top: 0, position: 'sticky', zIndex: 1}}>
22
+ <DarkTheme sx={{top: 0, position: 'sticky', zIndex: Z_INDEX.HEADER}}>
23
<NpmHeaderBar />
24
<Box
25
as="header"
src/components/search.js
+14
-5
@@ -5,7 +5,7 @@ import {AnimatePresence, motion} from 'framer-motion'
5
import {FocusOn} from 'react-focus-on'
6
import TextInput from './text-input'
7
import useSiteMetadata from '../hooks/use-site-metadata'
8
-import {HEADER_BAR, HEADER_HEIGHT} from '../constants'
8
+import {HEADER_BAR, HEADER_HEIGHT, Z_INDEX} from '../constants'
9
import {LightTheme} from '../theme'
10
import {LinkNoUnderline} from './link'
11
import * as getNav from '../util/get-nav'
@@ -106,11 +106,18 @@ export const Mobile = ({
106
const siteMetadata = useSiteMetadata()
107
const getCloseAnimation = exit => (isForceClose ? undefined : {exit})
108
109
+ const handleSearchToggle = React.useCallback(() => {
110
+ setMobileSearchOpen(true)
111
+ }, [setMobileSearchOpen])
112
+
113
return (
114
<>
111
- <Button aria-label="Search" aria-expanded={isMobileSearchOpen} onClick={() => setMobileSearchOpen(true)}>
112
- <SearchIcon />
113
- </Button>
115
+ {!isMobileSearchOpen && (
116
+ <Button aria-label="Search" aria-expanded={isMobileSearchOpen} onClick={handleSearchToggle}>
117
+ <SearchIcon />
118
+ </Button>
119
+ )}
120
+
121
<AnimatePresence>
122
{isMobileSearchOpen ? (
123
<FocusOn returnFocus={true} onEscapeKey={() => resetAndClose(true)}>
@@ -121,7 +128,7 @@ export const Mobile = ({
128
left: 0,
129
right: 0,
130
bottom: 0,
124
- zIndex: 1,
131
+ zIndex: Z_INDEX.SEARCH_OVERLAY,
132
}}
133
>
134
<Box
@@ -157,6 +164,8 @@ export const Mobile = ({
164
borderRightWidth: 0,
165
borderColor: 'border.muted',
166
position: 'relative',
167
+ bg: 'canvas.default',
168
+ zIndex: Z_INDEX.SEARCH_OVERLAY + 1,
169
}}
170
>
171
<motion.div
src/constants.js
+5
@@ -11,3 +11,8 @@ export const SKIP_TO_CONTENT_ID = 'skip-to-content'
11
export const SKIP_TO_SEARCH_ID = 'search-box-input'
12
13
export const CLI_PATH = '/cli'
14
+
15
+export const Z_INDEX = {
16
+ HEADER: 10,
17
+ SEARCH_OVERLAY: 25,
18
+}