fix Overlay: Change default overflow from hidden to auto

[liuliu-dev]

Related issue https://github.com/github/accessibility-audits/issues/14861

Changelog

The Overlay component sets max-height: 100vh with overflow: hidden by default. At small viewports (e.g. 320×256px), this causes overlay content to be clipped. This change updates the default overflow from hidden to auto

Before:

Screen.Recording.2026-02-20.at.11.39.46.AM.mov

After:

Screen.Recording.2026-02-20.at.11.40.50.AM.mov

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: 9a0a92e

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]

👋 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.

[primer-integration]

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

[primer-integration]

Integration test results from github/github-ui:

  CI Passed
  VRT Passed
  Projects Running

[siddharthkp]

Seems intuitive to me, but..

git blame led me to this PR from 5 years ago when this was added, something worth testing if we are bringing back the visual bugs this had solved: #1248

Commenting for now, will wait for your response before approving

[liuliu-dev]

Seems intuitive to me, but..

git blame led me to this PR from 5 years ago when this was added, something worth testing if we are bringing back the visual bugs this had solved: #1248

Commenting for now, will wait for your response before approving

@siddharthkp Thanks for the heads up!

I don't think this fix will bring back the bug.

The key difference between what #1248 reverted and this fix is overflow: visible vs overflow: auto. Whenoverflow: hidden was removed (reverting to overflow: visible), which does not create a clipping context, that's what caused content to past the border-radius corners.

Both hidden and auto create a clipping context, so the border-radius corner issue does not come back.

I tested with the ActionMenu MultipleSections story. When resizing the viewport to a smaller height, the menu list gets cut off. I recorded the difference between overflow: auto, overflow: hidden, and removing overflow.

Screen.Recording.2026-02-20.at.2.54.42.PM.mov

[siddharthkp]

Valid, can we check how Overlays with controls behave? For example: ConfirmationDialog, SelectPanel with footer

[liuliu-dev]

@siddharthkp I checked both:

ConfirmationDialog doesn't use the Overlay component. It renders via Dialog, which has its own Portal and CSS with ScrollableRegion handling overflow.

SelectPanel does use Overlay via AnchoredOverlay, the ActionList inside the panel scrolls. I tested the MultiSelectModal story at small viewports and they work correctly with overflow: auto:

MultiSelectModal.mov

[siddharthkp]

Amazing, thanks for double checking!