UnderlineNav: Prevent borders from triggering overflow menu - #8340
UnderlineNav: Prevent borders from triggering overflow menu#8340ShiyunXu wants to merge 2 commits into
Conversation
Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
🦋 Changeset detectedLatest commit: facbfe4 The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
github-actions
Bot
added
the
integration-tests: recommended
|
There was a problem hiding this comment.
Pull request overview
This PR hardens UnderlineNav wrap-mode overflow detection by preventing consumer-applied borders on the wrapper from altering the wrapper’s box model and falsely triggering the overflow (“More”) menu.
Changes:
- Reset wrapper borders on all sides when
UnderlineNavis in wrap overflow mode. - Add a patch changeset describing the behavior fix for
@primer/react.
Show a summary per file
| File | Description |
|---|---|
| packages/react/src/internal/components/UnderlineTabbedInterface.module.css | Updates wrap-mode wrapper styles to force borders to 0 so external border overrides can’t affect overflow detection. |
| .changeset/underline-wrapper-force-no-border.md | Adds a patch changeset documenting the UnderlineNav overflow-menu fix. |
Review details
💡 Add a code-review agent skill for context-aware, tailored reviews. Learn more in the docs.
- Files reviewed: 2/2 changed files
- Comments generated: 1
- Review effort level: Lite
| /* Pin the vertical box model so external border/padding overrides can't change the height budget and incorrectly trigger the overflow "more" menu */ | ||
| box-sizing: border-box; | ||
| border-block: 0 !important; | ||
| border: 0 !important; |
github-actions
Bot
added
integration-tests: passing
|
github-actions
Bot
added
integration-tests: failing
|
Integration test results from github/github-ui PR:
VRT check ensures that when visual differences are detected, the PR cannot proceed until someone acknowledges the changes by adding the "visual difference acknowledged" label. Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance. |
Closes N/A
Prevents consumer border styles on the wrap-mode UnderlineNav wrapper from changing its vertical box model and incorrectly displaying the overflow menu. This supersedes the stale approach from #8165 and addresses the integration issue seen in github/github-ui#26710.
Changelog
New
None.
Changed
Removed
None.
Rollout strategy
Testing & Reviewing
Verify custom borders on UnderlineNav no longer cause the More menu to appear when all items fit.