Skip to content

UnderlineNav: Prevent borders from triggering overflow menu - #8340

Open
ShiyunXu wants to merge 1 commit into
mainfrom
sx/underline-nav-overflow-box-model
Open

UnderlineNav: Prevent borders from triggering overflow menu#8340
ShiyunXu wants to merge 1 commit into
mainfrom
sx/underline-nav-overflow-box-model

Conversation

@ShiyunXu

Copy link
Copy Markdown

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

  • UnderlineNav now resets borders on every side while using wrap-mode overflow detection.

Removed

None.

Rollout strategy

  • Patch release
  • Minor release
  • Major release; if selected, include a written rollout or migration plan
  • None; if selected, include a brief description as to why

Testing & Reviewing

Verify custom borders on UnderlineNav no longer cause the More menu to appear when all items fit.

  • UnderlineNav browser tests (22 tests)
  • Stylelint and formatting checks

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
Copilot AI lite review requested due to automatic review settings August 25, 2026 05:59
@ShiyunXu
ShiyunXu requested a review from a team as a code owner August 25, 2026 05:59
@ShiyunXu
ShiyunXu requested a review from liuliu-dev August 25, 2026 05:59
@changeset-bot

changeset-bot Bot commented Aug 25, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 744f5c7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package
Name Type
@primer/react Patch

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 github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Aug 25, 2026
@github-actions

Copy link
Copy Markdown
Contributor

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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 UnderlineNav is 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

Comment on lines 26 to +28
/* 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;
@primer-integration

Copy link
Copy Markdown

Integration test results from github/github-ui PR:

Passed  CI   Passed
Passed  VRT   Passed
Passed  Projects   Passed

All checks passed!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants