Skip to content

UnderlineNav: Prevent borders from triggering overflow menu - #8340

Merged
liuliu-dev merged 2 commits into
mainfrom
sx/underline-nav-overflow-box-model
Aug 31, 2026
Merged

UnderlineNav: Prevent borders from triggering overflow menu#8340
liuliu-dev merged 2 commits into
mainfrom
sx/underline-nav-overflow-box-model

Conversation

@ShiyunXu

Copy link
Copy Markdown
Contributor

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: facbfe4

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;
@TylerJDev
TylerJDev added this pull request to the merge queue Aug 31, 2026
@github-merge-queue
github-merge-queue Bot removed this pull request from the merge queue due to a conflict with the base branch Aug 31, 2026
@github-actions github-actions Bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Aug 31, 2026
@github-actions

Copy link
Copy Markdown
Contributor

⚠️ Action required

👋 Hi, there are new commits since the last successful integration test. 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.

@github-actions
github-actions Bot temporarily deployed to storybook-preview-8340 August 31, 2026 18:18 Inactive
@github-actions github-actions Bot added integration-tests: failing Changes in this PR cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh labels Aug 31, 2026
@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!

@github-actions github-actions Bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Aug 31, 2026
@liuliu-dev
liuliu-dev added this pull request to the merge queue Aug 31, 2026
Merged via the queue into main with commit a79d6c6 Aug 31, 2026
54 checks passed
@liuliu-dev
liuliu-dev deleted the sx/underline-nav-overflow-box-model branch August 31, 2026 19:47
@primer primer Bot mentioned this pull request Aug 31, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants