feat(components): Add sticky variation to Modal Actions and Header

[taylorvnoj]

Motivations

Add sticky header/actions variants to composable Modals so long content scrolls in the middle while key controls stay visible, without changing default behaviour.

Changes

Added

• variant="sticky" | "inline" (default) support on Modal.Header and Modal.Actions
• Visual test cases and snapshots for sticky header/actions/regions

When sticky is enabled:
Header and actions are extracted from the scrollable body
The modal switches to a flex column layout
Only the modal body scrolls, while header and actions remain fixed

This avoids issues with position: sticky (e.g. content appearing underneath the footer) and results in more predictable layout and visual behaviour.

NOTE: The implementation relies on identifying ModalHeader / ModalActions directly (no wrapper support), which reflects current usage patterns in production. If we decide we want to support that, we can iterate on this foundation.

Changed

• Composable Modal layout now separates sticky regions from the scrollable body when variants are used
• Modal stories updated to demonstrate sticky header/actions
• Visual test page updated with new sticky region examples

Testing

• test the variations in the "Sticky Regions" story (header only, actions only, both)
  • when Header is sticky, it stays fixed at the top
  • when Actions are sticky they stay fixed at the bottom
  • only middle content scrolls
• put variant="sticky" in the header of "Modal With Provider Example" story to check that tabbing through content is still behaving as normal

Screen.Recording.2026-03-31.at.7.29.27.AM.mov

---

In Atlantis we use Github's built in pull request reviews.

[cloudflare-workers-and-pages]

Deploying atlantis with    Cloudflare Pages

Latest commit:	22f2e82
Status:	✅  Deploy successful!
Preview URL:	https://ef2b888f.atlantis.pages.dev
Branch Preview URL:	https://taylor-sticky-modal-bits.atlantis.pages.dev

View logs

[edison-cy-yang]

@AutumnDaweBaillie Do you think we should add some padding top to Modal.Actions now that content is scrollable?

Also, I'm thinking we need box-shadow to the sticky header and actions to indicate overflow when content scrolls behind them