fix(css): improve mobile responsiveness for navbar search and header#310
fix(css): improve mobile responsiveness for navbar search and header#310shubhtrek wants to merge 2 commits into
Conversation
✅ 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 media queries to enhance the mobile responsiveness of the search bar and search results modal. Feedback was provided regarding the usability of the search input on screens smaller than 400px, where a zero font size and restricted width hinder user interaction and trigger unwanted iOS zoom behavior. Additionally, a suggestion was made to remove redundant width properties in the search results modal to prevent potential horizontal overflow.
| .navbar__search { | ||
| max-width: 2.2rem; /* just wide enough for the search icon */ | ||
| overflow: hidden; | ||
| } | ||
|
|
||
| .navbar__search-input { | ||
| font-size: 0; | ||
| padding: 0 0.3rem; | ||
| } | ||
|
|
||
| .navbar__search-input::placeholder { | ||
| font-size: 0; /* hide placeholder text, keep the box clickable */ | ||
| } |
There was a problem hiding this comment.
On screens narrower than 400px, the search input is collapsed to a max-width of 2.2rem and the font-size is set to 0. This makes the search functionality effectively unusable because the user cannot see what they are typing. Furthermore, setting a font-size below 16px (including 0) triggers an automatic zoom-in on iOS Safari when the input is focused, which is a poor user experience. Consider allowing the search bar to expand when it has focus (e.g., using :focus-within) or maintaining a readable font size.
| left: 0 !important; | ||
| right: 0 !important; | ||
| width: 100vw !important; |
There was a problem hiding this comment.
Combining left: 0, right: 0, and width: 100vw is redundant and potentially problematic. left: 0 and right: 0 will naturally stretch the element to the full width of its positioning context. Explicitly setting width: 100vw can cause horizontal overflow on mobile devices where the viewport width includes the scrollbar, or if the element's parent is not the full width of the viewport.
| left: 0 !important; | |
| right: 0 !important; | |
| width: 100vw !important; | |
| left: 0 !important; | |
| right: 0 !important; |
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: - Constrain .navbar__search to max-width: 160px on mobile so the logo and hamburger always have room (flex-shrink + min-width: 0). - Hide DocSearch placeholder text on mobile (icon-only saves space). - Below 400px: collapse the search box to icon-only width (2.2rem), reduce navbar horizontal padding, lock .navbar__brand with flex-shrink: 0 to prevent logo clipping. - In the lunr-search results dropdown: apply text-overflow: ellipsis to category headings, clamp snippet text to 2 lines, tighten padding. - At 400px and below: stretch the results modal to 100vw with a 60vh max-height and scroll, so it never clips outside the viewport. Fixes kmesh-net#304 Signed-off-by: Shubh Pingale <135618936+shubhtrek@users.noreply.github.com>
There was a problem hiding this comment.
Pull request overview
This PR updates global Docusaurus CSS to improve mobile navbar/search behavior and search-results readability for issue #304.
Changes:
- Constrains navbar search sizing on mobile and very small screens.
- Adds mobile-specific styling for lunr/DocSearch-style search result dropdown content.
- Makes very small search results containers span the viewport width with scrolling.
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| } | ||
|
|
||
| .navbar__search-input { | ||
| font-size: 0; |
shubhtrek
force-pushed
the
fix/mobile-navbar-search-responsiveness
branch
from
ac684bd to
509ac8a
Compare
|
@shubhtrek can you attach screenshots about this new changes ? |
|
Keywords which can automatically close issues and at(@) or hashtag(#) mentions are not allowed in commit messages. The list of commits with invalid commit messages:
DetailsInstructions for interacting with me using PR comments are available here. If you have questions or suggestions related to my behavior, please file an issue against the kubernetes/test-infra repository. I understand the commands that are listed here. |
|
hey for this PR i want some time cause I solved but a I get one more issue in that so I am solving this and then I try to Pr again |
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:
Fixes #304