Pin the action buttons to the bottom of the scrollable dialogs

[dhenneke]

This fixes the location of the action buttons in the dialog that is used by the Module API, for example by the ILAG module.

Before	After

It would also be nice if the "shadow" would disappear when the content is not actually scrolling, but I didn't have a good idea on how to solve that easily. For now, the size is our main concern.

Checklist

• Tests written for new code (and old code if feasible)
• Linter and other CI checks pass
• Sign-off given on the changes (see CONTRIBUTING.md)

Type: enhancement

---

Here's what your changelog entry will look like:

✨ Features

• Pin the action buttons to the bottom of the scrollable dialogs (#11407). Contributed by @dhenneke.

[t3chguy]

Won't this cause the dialog's height to change if the contents changes? iirc @nadonomy had opinions in this area

[nadonomy]

Won't this cause the dialog's height to change if the contents changes? iirc @nadonomy had opinions in this area

The (ongoing) concern to avoid is resizing modals:

1. If the content height changes, e.g. users entering new lines in multi-line text inputs.
2. Between different modals multi-step journeys, e.g. as part of a wizard.

We solved this during login by instead anchoring the modal to the top of the screen so it can grow/shrink between itself. This means it's not vertically centred but is often offset up, but that's also desirable.

I can't speak to how wide reaching this PR is (is it all modals?), so would defer to yourself @t3chguy or @germain-gg (thinking about componentising in Compound) on the best next steps here.

[t3chguy]

@nadonomy it affects Poll creation dialogs and Module API dialogs, as well as any future dialogs which extend the (newer) ScrollableBaseModal class

[nadonomy]

@nadonomy it affects Poll creation dialogs and Module API dialogs, as well as any future dialogs which extend the (newer) ScrollableBaseModal class

Got it. In that case @germain-gg wdyt? Should we optimise for the resizing/anchoring concerns in this PR now, or further down the line as we mature and adopt components in Compound?

Separately - @dhenneke to confirm from your video - it looks like you can resize the modal to the point of obscuring the actions altogether - is that intentional? Ignore this - left being after and right being before threw me off!

[dhenneke]

Yes that can happen, but it's a very extreme min-height example. WCAG 2.1 advises to at least have it usable at 256px height which is okay-ish, (though unrelated for this change):

---

About the potential layout shift in the layout: The authors of the component would need to be cautious about the content they put in it. Not sure if re-layouting would actually be a problem if it at least does happen based on a user action.

In case you would prefer to not change the height, we should at least make sure the buttons are always aligned to the bottom of the dialog. Let me know what you would prefer.

[nadonomy]

In case you would prefer to not change the height, we should at least make sure the buttons are always aligned to the bottom of the dialog. Let me know what you would prefer.

This sound good. I think we should set a minimum height on the modal - the 256px/WCAG guidance seems sensible to me.

[dhenneke]

I updated the PR to pin the buttons to the bottom of the dialog instead of letting it shrink.

I would prefer to not work on the minimal-height-issues in this PR. It's a separate topic and one will inevitably run into situations where one will get multiple scrollbars. As written above, with the 256px total page height, at least no content is overflowing, though it is not perfect. But I think that is something that the design system would need to discuss and handle.

[nadonomy]

I would prefer to not work on the minimal-height-issues in this PR. It's a separate topic and one will inevitably run into situations where one will get multiple scrollbars. As written above, with the 256px total page height, at least no content is overflowing, though it is not perfect. But I think that is something that the design system would need to discuss and handle.

@dhenneke my sense is the same, just waiting on @germain-gg to confirm if this PR has any unintended consequences (e.g. if this modal component is consumed for multi-step modals, and these changes impact placement between screens).

[germain-gg]

Code looks good to me.

To answer @nadonomy it seems to be used only for

• Poll creation dialogs
• Link edits in the rich text editor