Make Dialog header and footer sticky

[manishdhorepatil-art]

What?

When dialog content overflows and the popup scrolls, Dialog.Header stays pinned to the top of the visible area and Dialog.Footer stays pinned to the bottom, using sticky positioning and the dialog surface background so scrolling content does not show through.

Why?

Long dialogs currently scroll the entire surface (including header and footer), so users lose context for the title and primary actions while reading. This matches the intent in #77180: parity with Modal-style behavior and clearer UX for scrollable dialogs.

How?

• In packages/ui/src/dialog/style.module.css, Dialog.Header uses position: sticky, top: 0, z-index: 1, and background-color set to the dialog surface token.
• Dialog.Footer uses position: sticky, bottom: 0, the same z-index and background, preserving existing flex layout and spacing.

Testing Instructions

1. From the repo root, run npm install if needed, then npm run storybook:dev.
2. In Storybook, open Design System → Components → Dialog.
3. Temporarily add enough body copy (or a tall block) between Dialog.Header and Dialog.Footer so the popup scrolls vertically.
4. Scroll the dialog: the header should remain visible at the top and the footer at the bottom; middle content should scroll between them.

Testing Instructions for Keyboard

1. Open the dialog from its trigger (e.g. Open Dialog).
2. Use Tab / Shift+Tab to move through header controls (e.g. title region, close), body content, and footer actions.
3. Confirm focus order is unchanged and all controls remain reachable while the header/footer stay visually fixed during scroll.

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @ManishDhorepatil.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Unlinked contributors: ManishDhorepatil.

Co-authored-by: manishdhorepatil-art <manishxdp@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: vishnupprajapat <vishnuprajapat@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @manishdhorepatil-art! In case you missed it, we'd love to have you join us in our Slack community.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[ciampo]

Hey @ManishDhorepatil , thank you for opening this PR.

The approach per se is not is not wrong, but unfortunately, the header and footer are looking off when content is scrolled

Did you test these changes yourself before asking for a review?

Here is a suggested approach

.popup {
    --wp-ui-dialog-padding: var(--wpds-dimension-padding-2xl);

    /* replace the existing hardcoded token reference */
    padding: var(--wp-ui-dialog-padding);
    /* ... rest of existing styles */
}

.header {
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--wpds-color-bg-surface-neutral-strong);
    margin-inline: calc(-1 * var(--wp-ui-dialog-padding));
    margin-top: calc(-1 * var(--wp-ui-dialog-padding));
    padding-inline: var(--wp-ui-dialog-padding);
    padding-top: var(--wp-ui-dialog-padding);
    /* existing styles */
}

.footer {
    position: sticky;
    bottom: 0;
    z-index: 1;
    background-color: var(--wpds-color-bg-surface-neutral-strong);
    margin-inline: calc(-1 * var(--wp-ui-dialog-padding));
    margin-bottom: calc(-1 * var(--wp-ui-dialog-padding));
    padding-inline: var(--wp-ui-dialog-padding);
    padding-bottom: var(--wp-ui-dialog-padding);
    /* existing styles */
}

See the Card component (--wp-ui-card-padding) for an existing example of this pattern, including the negative-margin "fullbleed" technique.

Other points to address:

• Let's add a dedicated Storybook example for easier discovery and testing
• Let's add a sticky prop to Dialog.Footer to enable/disable sticky behaviour (@jameskoster , what do you think should the default behaviour be?)
• @jameskoster , do you think we should display a border / shadow when content is scrolled, similarly to the Modal component in @wordpress/components ?

Let's also solve rebase, solve conflicts, and add a CHANGELOG entry.

[jameskoster]

Generally the footer will include actions, so making it sticky seems like a reasonable default.

We should show a border for now, but ideally I suppose this would be handled systematically by a dedicated ScrollArea component (separate issue, obviously).

[ciampo]

Hey @manishdhorepatil-art , let me know if the feedback shared above makes sense, and if you still have capacity to work on this.

[vishnupprajapat]

Hey @manishdhorepatil-art , are you working on this? If not, please let me know—I’d like to try solving this issue.

[manishdhorepatil-art]

@vishnupprajapat i am working on this

[manishdhorepatil-art]

@ciampo chan you Please review this PR now?

[ciampo]

Hey @manishdhorepatil-art , I appreciate the effort, but this PR has a lot of aspects that need addressing: the layout is still quite broken, the react-context based approach is overkill (data-attributes are enough), spacing is off compared to trunk, and there are some build errors preventing the PR from building.

Given that my time is limited, rather than leaving a very elaborate review, I've opened #77559 to implement an complete solution, and will close this PR.

I will still make sure to list you as a co-author in the new PR.

For future contributions, consider working on issues marked as "Good first issue".

[manishdhorepatil-art]

@ciampo >>I will still make sure to list you as a co-author in the new PR.
this works for me thanks for your feedback