UnderlineNav: Add `overflow: hidden` when calculating items for overflow menu #7504

TylerJDev · 2026-02-06T15:11:15Z

Closes https://github.com/github/primer/issues/6291

Credits to @siddharthkp & @francinelucca for the original PR: #7463 ✨

Changelog

New

Changed

Adds overflow: hidden to container when loading items

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

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

github-actions · 2026-02-06T15:11:49Z

👋 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. Or, apply the integration-tests: skipped manually label to skip these checks.

changeset-bot · 2026-02-06T15:15:52Z

🦋 Changeset detected

Latest commit: d9aab4b

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

Copilot

Pull request overview

This PR aims to reduce layout shift (CLS) in UnderlineNav by hiding overflow while the component calculates which items should move into the overflow (“More”) menu (fix for primer issue #6291).

Changes:

Add a ready prop to the shared UnderlineWrapper and emit a data-ready attribute.
Update UnderlineWrapper CSS to hide overflow until data-ready='true'.
Track isReady in UnderlineNav and pass it through to UnderlineWrapper.
Add a patch changeset entry.

Reviewed changes

Copilot reviewed 4 out of 4 changed files in this pull request and generated 3 comments.

File	Description
packages/react/src/internal/components/UnderlineTabbedInterface.tsx	Adds `ready` prop and `data-ready` attribute on the shared wrapper component.
packages/react/src/internal/components/UnderlineTabbedInterface.module.css	Hides overflow by default and restores it when `data-ready='true'`.
packages/react/src/UnderlineNav/UnderlineNav.tsx	Introduces `isReady` state and passes it to `UnderlineWrapper`.
.changeset/clever-geese-cover.md	Patch changeset documenting the CLS-related UnderlineNav update.

Comments suppressed due to low confidence (1)

packages/react/src/UnderlineNav/UnderlineNav.tsx:170

The new isReady/ready gating is user-visible behavior meant to prevent CLS, but it isn’t covered by a unit test. Since this component already has a comprehensive test suite, it would be good to add a test asserting the wrapper is initially non-ready (overflow hidden) and becomes ready after the first successful overflow calculation/resize observer pass.

    // Track whether the initial overflow calculation is complete to prevent CLS
    const [isReady, setIsReady] = useState(false)

packages/react/src/internal/components/UnderlineTabbedInterface.module.css

packages/react/src/internal/components/UnderlineTabbedInterface.tsx

packages/react/src/UnderlineNav/UnderlineNav.tsx

…e.module.css Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

…e.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

primer-integration · 2026-02-06T15:47:38Z

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/13031

adierkens · 2026-02-06T15:52:52Z

packages/react/src/internal/components/UnderlineTabbedInterface.module.css

  box-shadow: inset 0 -1px var(--borderColor-muted);

+  /* Hide overflow until calculation is complete to prevent CLS */
+  overflow: visible;


I think we can do this entirely within css and avoid any of the useEffect() updates, just with something like:

.UnderlineWrapper { &:not(:has([class*='prc-UnderlineNav-MoreButton-'])) { overflow-x: hidden; } }

You might need to update the classNames a bit (or move it to the UnderlineNav component directly)

Very nice! Although probably the same thing perf wise because the MoreButton appears after a javascript pass as well, right?

Thinking out loud, do we need to test this for cases where there is an overflow because of icons and counters, so the MoreButton may never appear, or is that already covered?

Thinking out loud, do we need to test this for cases where there is an overflow because of icons and counters, so the MoreButton may never appear,

Can the component still overflow without the menu? I haven't seen that, as I assumed that we also took those into account when determining whether to show the menu or not.

primer-integration · 2026-02-06T15:54:53Z

Integration test results from github/github-ui:

CI Passed
VRT Passed
Projects Passed

All checks passed!

iansan5653

Running this locally, I noticed that data-ready is not set to true, even though it is in the Storybook preview.

I tracked it down to this condition:

if (!isReady && widths.length > 0 && widths.length === validChildren.length) {
  setIsReady(true)
}

Logging widths.length vs validChildren.length shows that widths is twice as long as validChildren. The fact that it's exactly double smells like a potential StrictMode bug.

siddharthkp · 2026-02-09T10:21:17Z

packages/react/src/internal/components/UnderlineTabbedInterface.tsx

    <Component
      className={clsx(classes.UnderlineWrapper, className)}
      ref={ref as ForwardedRef<HTMLDivElement>}
+      data-ready={ready === undefined ? undefined : ready ? 'true' : 'false'}


More descriptive name please. data-hydrated / data-overflow-handled?

siddharthkp

Left a few comments, approving in advance

.changeset/clever-geese-cover.md

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

liuliu-dev

🎉

TylerJDev added 2 commits February 6, 2026 15:05

Add overflow: hidden logic

7b8e794

Add changeset

a0e4f42

TylerJDev requested a review from a team as a code owner February 6, 2026 15:11

TylerJDev requested review from Copilot and liuliu-dev February 6, 2026 15:11

github-actions bot added the staff Author is a staff member label Feb 6, 2026

Copilot started reviewing on behalf of TylerJDev February 6, 2026 15:11 View session

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 Feb 6, 2026

Run format

604c035

Copilot AI reviewed Feb 6, 2026

View reviewed changes

packages/react/src/internal/components/UnderlineTabbedInterface.module.css Outdated Show resolved Hide resolved

packages/react/src/internal/components/UnderlineTabbedInterface.tsx Outdated Show resolved Hide resolved

packages/react/src/UnderlineNav/UnderlineNav.tsx Show resolved Hide resolved

github-actions bot temporarily deployed to storybook-preview-7504 February 6, 2026 15:19 Inactive

TylerJDev deployed to github-pages February 6, 2026 15:29 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7504 February 6, 2026 15:29 Inactive

TylerJDev and others added 3 commits February 6, 2026 10:41

Update packages/react/src/internal/components/UnderlineTabbedInterfac…

7fc6739

…e.module.css Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update packages/react/src/internal/components/UnderlineTabbedInterfac…

6921a86

…e.tsx Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update packages/react/src/UnderlineNav/UnderlineNav.tsx

1bc03b6

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

github-actions bot requested a deployment to storybook-preview-7504 February 6, 2026 15:45 Abandoned

adierkens reviewed Feb 6, 2026

View reviewed changes

TylerJDev deployed to github-pages February 6, 2026 15:58 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7504 February 6, 2026 15:58 Inactive

iansan5653 reviewed Feb 6, 2026

View reviewed changes

siddharthkp reviewed Feb 9, 2026

View reviewed changes

siddharthkp approved these changes Feb 9, 2026

View reviewed changes

siddharthkp reviewed Feb 9, 2026

View reviewed changes

.changeset/clever-geese-cover.md Outdated Show resolved Hide resolved

Update .changeset/clever-geese-cover.md

c90b809

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

TylerJDev deployed to github-pages February 10, 2026 15:02 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7504 February 10, 2026 15:02 Inactive

Address feedback

d9aab4b

TylerJDev deployed to github-pages February 10, 2026 15:32 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7504 February 10, 2026 15:32 View deployment

liuliu-dev approved these changes Feb 10, 2026

View reviewed changes

UnderlineNav: Add overflow: hidden when calculating items for overflow menu #7504

Are you sure you want to change the base?

UnderlineNav: Add overflow: hidden when calculating items for overflow menu #7504

Conversation

TylerJDev commented Feb 6, 2026

Changelog

New

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

github-actions bot commented Feb 6, 2026

Uh oh!

changeset-bot bot commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

primer-integration bot commented Feb 6, 2026

Uh oh!

adierkens Feb 6, 2026

Choose a reason for hiding this comment

Uh oh!

siddharthkp Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

TylerJDev Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

primer-integration bot commented Feb 6, 2026

Uh oh!

iansan5653 left a comment

Choose a reason for hiding this comment

Uh oh!

siddharthkp Feb 9, 2026

Choose a reason for hiding this comment

Uh oh!

siddharthkp left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

liuliu-dev left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

UnderlineNav: Add `overflow: hidden` when calculating items for overflow menu #7504

UnderlineNav: Add `overflow: hidden` when calculating items for overflow menu #7504

changeset-bot bot commented Feb 6, 2026 •

edited

Loading