ConfirmationDialog footer buttons overflow on small screens with long text

[tingx2wang]

Description:

When using ConfirmationDialog with buttons that have longer text, the buttons in the footer overflow and do not respond well to smaller screen sizes. The Primer team recommends that the component itself should handle this responsively by stacking the buttons when the space is too small.

See internal discussion: https://github.slack.com/archives/C01L618AEP9/p1748988539417999

Steps to reproduce:

1. Use ConfirmationDialog with buttons that have long text in the footer.
2. View the dialog on a smaller screen or shrink the browser window.

Version:
v37.25.0

Browser:
Chrome

[github-actions]

Uh oh! @tingx2wang, at least one image you shared is missing helpful alt text. Check your issue body to fix the following violations:

• Images should have meaningful alternative text (alt text) at line 7

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

[raman365]

Hi, I can absolutely help with this. Just assign me to the issue and I will happily fix it for you!

[hellojanehere]

hello @tingx2wang - thanks for bringing this to our attention, and @raman365 - thanks for your willingness to get involved! this should be a pretty straightforward fix - the buttons should be using display: block, which should allow them to appear on their own individual line as per here and therefore prevent this behavior - let us know if you have any follow-up questions!