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

[Mohit5Upadhyay]

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

issue-search-box.mp4

Updated

issue-resolved-search.mp4

References

Closes #1660

[Mohit5Upadhyay]

Hey team 👋

This PR addresses #1660 by updating the CSS & handleClick to prevent the search overlay from overlapping the npm docs logo on mobile devices. I’ve tested it in both mobile and desktop views to ensure everything looks good.

Let me know if you’d like any changes or if there’s a preferred approach for handling the header during search.

Thanks so much for taking the time to review this!

[owlstronaut]

@Mohit5Upadhyay This is great, thank you! I have just a couple ideas that would make this a little less heavy-handed on the z-index and more extensible for later

For constants we could add this:

export const Z_INDEX = {
  HEADER: 10,
  SEARCH_OVERLAY: 25
}

Then we can do

import {HEADER_HEIGHT, Z_INDEX, HEADER_BAR} from '../constants'

...

<FocusOn returnFocus={true} onEscapeKey={() => resetAndClose(true)}>
  <Box
    sx={{
...
      zIndex: Z_INDEX.SEARCH_OVERLAY,
    }}
  >
            
...
<Box sx={{display: 'flex', flexDirection: 'column', height: resultsOpen ? '100%' : 'auto'}}>
  <Box
    sx={{
...
      zIndex: Z_INDEX.SEARCH_OVERLAY + 1, 
    }}
  > 

And a quick edit of the header.js file

import {HEADER_HEIGHT, HEADER_BAR, Z_INDEX} from '../constants'
...
<DarkTheme sx={{top: 0, position: 'sticky', zIndex: Z_INDEX.HEADER}}>

If you rebase on main, the linter should start passing for you now as well (though the publisher won't currently work for fork prs)

[Mohit5Upadhyay]

Hi @owlstronaut 👋
I’ve pushed the changes after rebasing and implementing your feedback (using z-index constants).
Let me know if there’s anything else you’d like adjusted.

Thanks!