fix(css): improve mobile responsiveness for navbar search and header#329
fix(css): improve mobile responsiveness for navbar search and header#329shubhtrek wants to merge 1 commit into
Conversation
Signed-off-by: Shubh Pingale <135618936+shubhtrek@users.noreply.github.com>
✅ Deploy Preview for kmesh-net ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
[APPROVALNOTIFIER] This PR is NOT APPROVED This pull-request has been approved by: The full list of commands accepted by this bot can be found here. DetailsNeeds approval from an approver in each of these files:Approvers can indicate their approval by writing |
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces CSS changes to improve the responsiveness of the mobile navbar search and the Lunr search results modal on smaller viewports. The review feedback highlights two important layout improvements: constraining the expanded search bar width on focus to prevent layout breakage on narrow viewports, and explicitly defining the top and z-index properties for the fixed search results container to ensure consistent vertical positioning and correct layering.
Important
The consumer version of Gemini Code Assist on GitHub is being sunset. Starting June 18, 2026, new organization installations will be blocked, and all code review activity will officially cease on July 17, 2026.
For more details on the timeline and next steps, please review the Help Documentation.
| .navbar__search:focus-within { | ||
| max-width: 100%; | ||
| } |
There was a problem hiding this comment.
On extremely narrow viewports (under 400px), setting max-width: 100% on focus can cause the search bar to push other elements (like the logo or hamburger menu) completely out of the viewport or trigger horizontal overflow. Since .navbar__brand has flex-shrink: 0 to prevent logo clipping, the combined width of the brand, the expanded search bar, and the hamburger toggle will exceed the viewport width.
To prevent this layout breakage, constrain the expanded width of the search bar to the remaining available space using a dynamic calc() function.
| .navbar__search:focus-within { | |
| max-width: 100%; | |
| } | |
| .navbar__search:focus-within { | |
| max-width: calc(100vw - 150px); | |
| } |
| [class*="searchResultsContainer"], | ||
| .lunr-search-results, | ||
| #lunr-search-results-container { | ||
| position: fixed; | ||
| left: 0; | ||
| right: 0; | ||
| max-height: 60vh; | ||
| overflow-y: auto; | ||
| border-radius: 0; | ||
| box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); | ||
| } |
There was a problem hiding this comment.
When using position: fixed on the search results container, omitting the top property can lead to highly inconsistent vertical positioning across different mobile browsers (especially on iOS Safari when the virtual keyboard is active). The browser will fall back to the element's "static position", which can cause the results modal to overlap the search input itself or render off-screen.
Additionally, without an explicit z-index, the modal might render behind other fixed or sticky elements on the page (such as the mobile sidebar, back-to-top button, or table of contents).
To ensure consistent rendering and visibility, explicitly define top (using Docusaurus's navbar height variable --ifm-navbar-height) and a safe z-index.
[class*="searchResultsContainer"],
.lunr-search-results,
#lunr-search-results-container {
position: fixed;
top: var(--ifm-navbar-height, 3.75rem);
left: 0;
right: 0;
max-height: 60vh;
overflow-y: auto;
border-radius: 0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: var(--ifm-z-index-dropdown, 100);
}There was a problem hiding this comment.
Pull request overview
This PR adjusts site CSS to improve mobile responsiveness of the navbar search area and the Lunr search results UI, primarily targeting cramped layouts on <996px and <400px viewports (issue #304).
Changes:
- Adds mobile breakpoints to constrain/collapse the navbar search area and preserve space for the logo + hamburger.
- Tweaks Lunr search result presentation on small screens (ellipsis for headings, clamped snippets, tighter padding).
- Makes the results container full-width on very small screens via
left: 0/right: 0and adds a viewport-based max-height + scrolling.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| /* Hide the placeholder text — icon-only saves horizontal space */ | ||
| .navbar__search input::placeholder, | ||
| .DocSearch-Button-Placeholder { | ||
| display: none; | ||
| } |
| /* Truncate long category headings with ellipsis */ | ||
| .search-result-match__category, | ||
| [class*="searchResultItem"] h3, | ||
| [class*="lunr"] .category-label { | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| white-space: nowrap; | ||
| } |
Summary
Re-submission of #310 and Solves #304 (auto-closed when fork was accidentally deleted).
On screens narrower than 996px the search input was expanding to its full intrinsic
width, squeezing the logo and hamburger toggle out of view. Category labels inside
the lunr-search results modal would also wrap awkwardly or get truncated on
sub-400px viewports.
Changes in
src/css/custom.css.navbar__searchtomax-width: 160pxon mobile so the logo andhamburger always have room (
flex-shrink+min-width: 0)..navbar__brandwithflex-shrink: 0to prevent logo clipping.2.2rem) when idle,expand to full width on focus using
:focus-within.(addressed from previous review feedback).
text-overflow: ellipsistocategory headings, clamp snippet text to 2 lines, tighten padding.
left: 0+right: 0(NOT
width: 100vw) to avoid horizontal overflow from scrollbar width.60vhmax-height with scroll so it never clips outside the viewport.Review Feedback Addressed (from #310)
font-size: 0triggers iOS Safari zoomwidth: 100vwcauses horizontal overflowleft: 0+right: 0:focus-withinto expand on tapCloses #304