chore: ensure max-height does not surpass viewport height in Overlay, ActionMenu #7510

francinelucca · 2026-02-07T02:05:44Z

This pull request improves the handling of maximum height for overlays and action menus, ensuring they never exceed the viewport height and remain usable on smaller screens. It also introduces a new story example demonstrating scrollable overlay content when the maximum height is reached.

Changelog

New

Overlay story demonstrating max-height setting

Changed

Modify max-height css for ActionMenu and Overlay to be the minimum between the desired max-height and the height of the viewport, to ensure the content does not get clipped.

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)

… ActionMenu

changeset-bot · 2026-02-07T02:05:47Z

🦋 Changeset detected

Latest commit: c357d14

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 · 2026-02-07T02:06:14Z

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

Ensure that the max-height of Overlay and ActionMenu does not exceed the viewport height.

…eact into chore/fix-max-height-attributes

Copilot

Pull request overview

This PR updates overlay-like components in @primer/react to ensure their max-height constraints don’t exceed the viewport, and adds a Storybook example demonstrating scrollable overlay content when a max-height is applied.

Changes:

Update Overlay and ActionMenu max-height size tokens to clamp against the viewport height.
Add a new Overlay features story demonstrating maxHeight + scrollable content.
Add story-only CSS for the new example’s layout.

Reviewed changes

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

File	Description
packages/react/src/Overlay/Overlay.module.css	Clamp max-height size tokens against viewport height.
packages/react/src/ActionMenu/ActionMenu.module.css	Clamp ActionMenu container max-height size tokens against viewport height.
packages/react/src/Overlay/Overlay.features.stories.tsx	Add “SettingMaxHeight” Storybook example showcasing scrollable overlay content.
packages/react/src/Overlay/Overlay.features.stories.module.css	Add styles for the new scrollable-content story layout.

packages/react/src/Overlay/Overlay.features.stories.tsx

packages/react/src/Overlay/Overlay.features.stories.module.css

packages/react/src/Overlay/Overlay.module.css

packages/react/src/ActionMenu/ActionMenu.module.css

francinelucca · 2026-02-10T03:40:00Z

@copilot open a new pull request to apply changes based on the comments in this thread

Copilot · 2026-02-10T03:40:09Z

@francinelucca I've opened a new pull request, #7519, to work on those changes. Once the pull request is ready, I'll request review from you.

…iewport handling (#7519) Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

Copilot

Pull request overview

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

Copilot · 2026-02-10T04:09:17Z

packages/react/src/Overlay/Overlay.features.stories.tsx

+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const confirmButtonRef = useRef<HTMLButtonElement>(null)
+  const closeOverlay = () => setIsOpen(false)


confirmButtonRef is used as the ref for the close IconButton (and as initialFocusRef), which makes the name misleading in this story. Rename it to something like closeButtonRef/initialFocusRef to match its role.

packages/react/src/Overlay/Overlay.features.stories.tsx

Copilot · 2026-02-10T04:09:17Z

packages/react/src/Overlay/Overlay.features.stories.tsx

+export const SettingMaxHeight = () => {
+  const [isOpen, setIsOpen] = useState(false)
+  const buttonRef = useRef<HTMLButtonElement>(null)
+  const confirmButtonRef = useRef<HTMLButtonElement>(null)
+  const closeOverlay = () => setIsOpen(false)


SettingMaxHeight doesn’t accept Storybook args (notably open), so the e2e/VRT runner’s args: {open: true} won’t actually open the overlay for screenshots/a11y checks. Consider taking {open}: Args and rendering the overlay when isOpen || open (and align the useFocusTrap disabled condition accordingly).

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

francinelucca · 2026-02-10T18:50:48Z

@copilot open a new pull request to apply changes based on the comments in this thread

Copilot · 2026-02-10T18:50:57Z

@francinelucca I've opened a new pull request, #7522, to work on those changes. Once the pull request is ready, I'll request review from you.

primer-integration · 2026-02-10T18:52:59Z

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

primer-integration · 2026-02-10T18:59:27Z

Integration test results from github/github-ui:

CI Passed
VRT Running
Projects Passed

chore: ensure max-height does not surpass viewport height in Overlay,…

95bed0e

… ActionMenu

Copilot AI review requested due to automatic review settings February 7, 2026 02:05

francinelucca requested a review from a team as a code owner February 7, 2026 02:05

francinelucca requested a review from liuliu-dev February 7, 2026 02:05

github-actions bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Feb 7, 2026

Copilot started reviewing on behalf of francinelucca February 7, 2026 02:06 View session

Fix max-height issue in Overlay and ActionMenu

4729b56

Ensure that the max-height of Overlay and ActionMenu does not exceed the viewport height.

francinelucca requested a review from TylerJDev February 7, 2026 02:06

francinelucca added 2 commits February 6, 2026 21:06

add new story to VRT

3e408ba

Merge branch 'chore/fix-max-height-attributes' of github.com:primer/r…

bd7c830

…eact into chore/fix-max-height-attributes

francinelucca added the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Feb 7, 2026

Copilot AI reviewed Feb 7, 2026

View reviewed changes

github-actions bot requested a deployment to storybook-preview-7510 February 7, 2026 02:09 Abandoned

test(vrt): update snapshots

2cab4a9

primer bot requested a review from a team as a code owner February 7, 2026 02:18

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Feb 7, 2026

github-actions bot temporarily deployed to storybook-preview-7510 February 7, 2026 02:18 Inactive

primer bot deployed to github-pages February 7, 2026 02:27 View deployment

github-actions bot temporarily deployed to storybook-preview-7510 February 7, 2026 02:28 Inactive

Copilot AI mentioned this pull request Feb 10, 2026

Apply review feedback: fix initialFocusRef, positioning, and mobile viewport handling #7519

Merged

13 tasks

Copilot AI and others added 2 commits February 9, 2026 23:04

Apply review feedback: fix initialFocusRef, positioning, and mobile v…

42f47e8

…iewport handling (#7519) Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: francinelucca <40550942+francinelucca@users.noreply.github.com>

Merge branch 'main' into chore/fix-max-height-attributes

71b8be7

francinelucca requested a review from Copilot February 10, 2026 04:05

Copilot started reviewing on behalf of francinelucca February 10, 2026 04:05 View session

Copilot AI reviewed Feb 10, 2026

View reviewed changes

github-actions bot requested a deployment to storybook-preview-7510 February 10, 2026 04:09 Abandoned

francinelucca deployed to github-pages February 10, 2026 04:21 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7510 February 10, 2026 04:22 Inactive

Update packages/react/src/Overlay/Overlay.features.stories.tsx

c357d14

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

Copilot AI mentioned this pull request Feb 10, 2026

Apply review feedback: rename confirmButtonRef and add Storybook args support #7522

Draft

13 tasks

francinelucca deployed to github-pages February 10, 2026 19:00 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7510 February 10, 2026 19:01 View deployment

TylerJDev approved these changes Feb 10, 2026

View reviewed changes

chore: ensure max-height does not surpass viewport height in Overlay, ActionMenu #7510

Are you sure you want to change the base?

chore: ensure max-height does not surpass viewport height in Overlay, ActionMenu #7510

Conversation

francinelucca commented Feb 7, 2026

Changelog

New

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Feb 7, 2026

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!

Uh oh!

francinelucca commented Feb 10, 2026

Uh oh!

Copilot AI commented Feb 10, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Copilot AI Feb 10, 2026

Choose a reason for hiding this comment

Uh oh!

francinelucca commented Feb 10, 2026

Uh oh!

Copilot AI commented Feb 10, 2026

Uh oh!

primer-integration bot commented Feb 10, 2026

Uh oh!

primer-integration bot commented Feb 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

changeset-bot bot commented Feb 7, 2026 •

edited

Loading