fix(nav): keep aux nav links single-line on narrow mobile widths#519
fix(nav): keep aux nav links single-line on narrow mobile widths#519gkorland wants to merge 1 commit into
Conversation
Code review of #518 found that on narrow viewports (e.g. ~280px, the Galaxy Z Fold cover screen) or with a longer/additional aux_links entry, the aux nav button text wraps to a second line. That grows #main-header taller than the padding-top reserved on .site-nav, so the fixed search box ends up overlapping the first nav item's click target by a few pixels. Force aux nav links to stay on a single line and scroll horizontally instead, using the theme's own existing overflow-x: auto, so #main-header's height (and the matching reserved padding-top) stays constant regardless of viewport width or aux_links content. Verified via headless Chromium at 280/320/375px widths and with a stress-tested 4th, longer aux link: no overlap in any case. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
|
Warning Review limit reached
Next review available in: 26 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
1 participant
Summary
Follow-up to #518 (already merged). Code review of that PR found a narrow-viewport edge case in the mobile search-box positioning fix: the
padding-topreserved above the nav list assumes a fixed height for the pinned search box + aux nav row, but that height wasn't actually fixed.Changes
aux_linksentry, the aux nav button text wraps to a second line, growing#main-headertaller than the reservedpadding-top. This caused the pinned search box to overlap the first nav item's click target by a few pixels.white-space: nowrap, relying on the theme's own existingoverflow-x: autofor horizontal scrolling instead of wrapping. This keeps#main-header's height constant regardless of viewport width oraux_linkscontent.Testing
Verified with headless Chromium (Playwright) at 280px, 320px, and 375px widths, using the real
_config.ymlaux_links(3 entries) and a stress test with a 4th, longer aux link appended — no overlap in any case after the fix. Desktop layout (>= 50rem) is untouched.Memory / Performance Impact
N/A — CSS-only change, no measurable perf impact.
Related Issues
Follow-up to #518.