Replace ActionBar overflow calculations with CSS wrapping approach

[iansan5653]

Takes the CSS flex wrapping approach to detecting overflowing from #7506 and applies it to ActionBar, resulting in a much simpler and more reliable solution that is also SSR-stable:

Screen.Recording.2026-03-11.at.2.37.39.PM.mov

Compare to the current implementation, which flickers on load and doesn't calculate the overflow as accurately, causing items to occasionally get clipped (this is more noticeable on production where it can sometimes calculate the overflow incorrectly; but that's hard to show in Storybook):

Screen.Recording.2026-03-11.at.2.42.41.PM.mov

• ClosesAvoid flickering when calculating ActionBar overflow #7447
• Closeshttps://github.com/github/primer/issues/6394
• Closeshttps://github.com/github/primer/issues/6307

Changelog

New

Changed

Improves ActionBar overflow calculations and SSR support

Removed

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-ui (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: 30ea75a

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	Minor

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]

⚠️ 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]

Pull request overview

This PR refactors ActionBar overflow handling away from JS width calculations and towards a CSS wrapping + overflow-clipping approach (similar to the UnderlineNav work), aiming to reduce flicker and improve SSR stability.

Changes:

• Replaces ResizeObserver/width math with CSS wrapping + scroll-driven overflow detection.
• Introduces a per-item overflow registration mechanism using useSyncExternalStore + IntersectionObserver.
• Adds a changeset for a minor release of @primer/react.

Reviewed changes

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

File	Description
packages/react/src/ActionBar/ActionBar.tsx	Reworks overflow detection and overflow menu population to use descendant registry updates driven by wrapping/overflow state.
packages/react/src/ActionBar/ActionBar.module.css	Adds wrapping container + scroll-timeline based detection to control overflow button visibility.
.changeset/many-suns-promise.md	Declares the change as a minor release.

Comments suppressed due to low confidence (1)

packages/react/src/ActionBar/ActionBar.tsx:433

• ref is cast to RefObject from forwardedRef, but forwardedRef can be a callback ref at runtime. useActionBarItem reads ref.current, which will throw if a callback ref is passed. Consider using an internal useRef plus useRefObjectAsForwardedRef/useMergedRefs so you always have a real object ref for measurements and can still forward refs safely.

export const ActionBarGroup = forwardRef(({children}: React.PropsWithChildren, forwardedRef) => {
const backupRef = useRef<HTMLDivElement>(null)
const ref = (forwardedRef ?? backupRef) as RefObject<HTMLDivElement>
const {id, isOverflowing} = useActionBarItem(
ref,
useMemo((): ChildProps => ({type: 'group'}), []),

[francinelucca]

something's off here 👀

Screen.Recording.2026-03-11.at.3.14.32.PM.mov

[iansan5653]

something's off here 👀

Should be resolved now by setting visibility:hidden on those items which will remove them from the tab order. Thanks for catching that!

[francinelucca]

Looks amazing 😻. Very excited to get this in! thanks for persevering through this 🙏🏽
Also really happy with the code cleanup since last revision ❇️ 🧹

[primer-integration]

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

[primer-integration]

Integration test results from github/github-ui:

CI Passed
VRT Passed
Projects Passed

All checks passed!