fix: make scrollable modal a separate prop rather than the default

[Bracciata]

This addresses a breaking change introduced in #2125.

Changes

• Moves the scrollable modal behavior from the default to an opt-in scrollable boolean prop
• Scopes max-height / overflow-y: auto CSS rules to .Modal--scrollable only
• Non-scrollable modals revert to pre-Introduce modal max-height #2125 behavior (scrim scrolls when content overflows)
• The scrollable prop is separate from variant, allowing composition with variant="info"
• Reduces vertical offset from 6.25rem to 4rem for better use of available viewport space
• Sets dialog z-index to 25 so modals render above the header
• Adds documentation and an interactive example for the scrollable modal
• Adds unit tests for the scrollable class and accessibility
• Adds e2e screenshot tests and a keyboard scrolling test for scrollable modals

Migration

If you were relying on the scrollable-by-default behavior introduced in #2125, add the scrollable prop to your Modal:

- <Modal show>
+ <Modal show scrollable>

The scrollable prop can also be combined with variant="info":

<Modal show scrollable variant="info">

[aws-amplify-us-east-1]

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-2314.d15792l1n26ww3.amplifyapp.com

[Copilot]

Pull request overview

This PR addresses the breaking change from #2125 by making “scrollable modal” behavior opt-in via a variant="scrollable" rather than the default.

Changes:

• Scopes scrollable dialog sizing/overflow behavior to a new .Modal--scrollable variant class.
• Extends the React Modal API to support variant="scrollable" and updates relevant tests/screenshots accordingly.
• Documents the new scrollable modal variant and updates the prop docs.

Reviewed changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
packages/styles/dialog.css	Scopes scrollable max-height/overflow rules to .Modal--scrollable and adjusts dialog CSS variables.
packages/react/src/components/Modal/index.tsx	Adds scrollable to the variant union and applies Modal--scrollable class when selected.
packages/react/src/components/Modal/index.test.tsx	Adds coverage for the new Modal--scrollable class and updates long-content a11y test to use the scrollable variant.
packages/react/src/components/Modal/screenshots.e2e.tsx	Updates large-content screenshot fixtures to use variant="scrollable".
docs/pages/components/Modal.mdx	Adds documentation + example for the scrollable variant and updates the variant prop description/type list.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.