Make Dialog footer scrollable on very short viewports

[hectahertz]

Part of the work to improve reflow of the component. This helps to make all the footer buttons accessible on small screens and gives some extra breathing room to the body.

Changelog

Changed

Dialog footer becomes scrollable on very short viewports.

Before

Screen.Recording.2025-01-30.at.20.46.28.mov

After

Screen.Recording.2025-01-30.at.20.46.08.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

The CSS changes seem a bit esoteric, but are due to overflow: scroll not being compatible with justify-content: flex-end. flex-direction: row-reverse; flex-wrap: wrap-reverse; plus reversing the items is visually equivalent but compatible. The focus order keeps being the same.

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)

[changeset-bot]

🦋 Changeset detected

Latest commit: 40ea8f7

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 depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	105.63 KB (+0.06% 🔺)
packages/react/dist/browser.umd.js	106.06 KB (+0.02% 🔺)

[TylerJDev]

I noticed the buttons were reversed, and focus seems to be too. Wasn't sure if this was expected or not 🤔

[hectahertz]

They shouldn't be! This is compensated for in the JS code. Let's review this together

[TylerJDev]

I think the buttons are only reversed on the ConfirmationDialog. If we reverse the array for the footer buttons in that component then I think the issue should be fixed 🤔