fix(TopNav): clamp mega menu panel to viewport width - #4558
Merged
Conversation
The desktop mega-menu panel capped its content at a fixed 960px with no viewport constraint, so on narrow viewports the anchored popover extended past the screen edge and content was clipped. Clamp the panel width to min(960px, 100dvw - gutter) so it always fits the viewport.
meta-cla
Bot
added
the
CLA Signed
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
github-actions
Bot
added
the
needs:design-review
github-actions
Bot
requested review from
cvkxx,
ernestt,
kentonquatman and
rubyycheung
July 30, 2026 19:20
21 tasks
Contributor
PR Analysis Report📚 Storybook PreviewView Storybook for this PR 🧪 Sandbox PreviewView Sandbox for this PR Modified ComponentsTopNav · View in Storybook
Bundle Size Summary
Accessibility AuditStatus: No accessibility violations detected. Generated by PR Enrichment workflow | Storybook | Sandbox | View full report |
Use a 16px gutter (--spacing-4) instead of 24px so the panel gets more usable width on narrow viewports.
cixzhang
marked this pull request as ready for review
July 30, 2026 19:37
A tall mega menu ran off the bottom of the viewport with no way to reach the clipped content (e.g. the featured card). Clamp the anchored panel to the space available below the nav and scroll its content internally, while still anchoring below the nav. This is a stopgap until a mobile bottom-sheet presentation lands.
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
2 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.
Problem
The desktop
TopNavMegaMenupanel is an anchored top-layer popover with no size constraints:maxWidth: 960with no viewport constraint, so on narrow viewports it also ran off the screen edge.Tracked in the responsive-web effort (#4476).
Fix (stopgap)
The proper long-term answer for narrow viewports is a bottom-sheet presentation, but that's still WIP in
lab. Until then, keep the menu on screen while still anchoring below the nav:position-area: self-block-end, so its containing block spans from the nav's block-end to the viewport edge —max-height: calc(100% - gutter)is exactly that space, and it accounts for the nav offset automatically. The layer becomes a flex column so the panel shrinks and its content scrolls internally (overflowY: auto+overscroll-behavior: contain), keeping the surface radius/shadow static at the edges.maxWidth: min(960px, calc(100dvw - gutter))so the panel never exceeds the viewport width. Desktop (≥960px) behavior is unchanged.Uses only StyleX-supported values (
min()/calc()/100dvw) —Dialogalready uses100dvw, andDropdownMenu/ContextMenualready cap anchored panels withmaxHeight+ internal scroll.Testing
pnpm --filter @astryxdesign/core test TopNavMegaMenu— 21 passingpnpm --filter @astryxdesign/core build— StyleX compiles the clampspnpm --filter @astryxdesign/core lint— 0 errorsDraft: still want to confirm the scroll + reflow visually across breakpoints in Storybook before marking ready.