fix: mobile dropdown nav being cut off on narrow screens - #159
Merged
Conversation
Contributor
WalkthroughThe mobile header dropdown is repositioned against the right edge and constrained to ChangesMobile navigation
Estimated code review effort: 1 (Trivial) | ~2 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
gberenice
reviewed
Jul 24, 2026
Member
There was a problem hiding this comment.
Why do we need these assets in the repo?
Contributor
Author
There was a problem hiding this comment.
too much claude vibecoding haha
On viewports <= 575px the dropdown menu was positioned with both left: 0 and right: 0 alongside a fixed width, so browsers honored left and pushed the fixed-width menu off the right edge of the screen, cutting off the menu labels. Anchor the dropdown to the right edge of the header instead and cap its width to the viewport as a safety net. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_013YkRkBm7wgX1YXjdDXHgVb
oycyc
force-pushed
the
claude/mobile-dropdown-nav-cutoff-fp7zzw
branch
from
July 24, 2026 13:22
81f04b8 to
7cec53a
Compare
Gowiem
approved these changes
Jul 27, 2026
✅ Deploy Preview for masterpoint ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
what
<= 575pxthe dropdown is now anchored to the right edge of the header (where the toggle button lives) and capped to the viewport width, so all menu labels are fully visible.why
<= 575pxthe dropdown<ul>was styled with bothleft: 0andright: 0while also keeping the fixedwidth: 200pxfrom the tablet breakpoint.left,right, andwidth, browsers (in LTR) honorleftand ignoreright. Because thenav(its positioning context) sits at the far right of the header on mobile,left: 0anchored the 200px-wide menu to the right side of the screen and pushed it off-screen — cutting off labels like "OUR SERVICES", "WHO WE ARE", "NEWSLETTER" and "CASE STUDIES".left: 0withleft: auto; right: 0so the menu stays anchored to the header's right edge (the same behavior the tablet breakpoint already uses), plus amax-width: calc(100vw - 40px)safety net so it can never overflow the viewport on any device width.Change is scoped to the
@media (max-width: 575px)block only, so the desktop and tablet menus are unaffected.validation
Reproduced and verified locally with Hugo Extended v0.162.1, rendered in a mobile viewport (393px wide, the reported iPhone case) with the dropdown open.
Before — labels overflow and are cut off on the right edge (menu measured at
left: 297px → right: 497pxin a 393px viewport):After — the full menu is visible and contained within the viewport (measured at
left: 173px → right: 373px, no overflow):references
Summary by CodeRabbit