va-modal: Update spacing and button layout

[danbrady]

Chromatic

https://db-update-modal-layout-5043--65a6e2ed2314f7b8f98609d8.chromatic.com

Description

This PR refactors the va-modal web component with a focus on simplifying and modernizing its styling. The updates improve presentation, accessibility, and responsiveness.

Key updates include better spacing on mobile to reduce text wrapping, especially for long button labels, smaller icons with less surrounding whitespace to free up content space, and full-width buttons to keep visual weight consistent regardless of label length.

It also cleans up the codebase by removing deprecated or unused styles, props, and markup like legacy alert actions and the unused unstyled prop. Formatting and structure in the TypeScript file were also improved to make the code more consistent and easier to read.

Related tickets and links

Closes #5043

Screenshots

Default Modal / Mobile

Before	After

Default Modal / Desktop

Before	After

Status Modal / Mobile

Before	After

Status Modal / Desktop

Before	After

Testing and review

Approvals

See the QA Checklists section below for suggested approvals. Use your best judgment if additional reviews are needed. When in doubt, request a review.

Approval groups

Add approval groups to the PR as needed:

• Engineering: platform-design-system-fe
• Accessibility: platform-design-system-a11y
• Design: platform-design-system-designer

QA checklists

Use the QA checklists below as guides, not rules. Not all checklists will apply to every PR but there could be some overlap.

In all scenarios, changes should be fully tested by the author and verified by the reviewer(s); functionality, responsiveness, etc.

✨ New Component Added

• The PR has the minor label
• The component matches the Figma designs.
• All properties, custom events, and utility functions have e2e and/or unit tests
• A new Storybook page has been added for the component
• Tested in all VA breakpoints.
• Chromatic UI Tests have run and snapshot changes have been accepted by the design reviewer
• Tested in vets-website using Verdaccio
• Engineering has approved the PR
• Design has approved the PR
• Accessibility has approved the PR

🌱 New Component Variation Added

• The PR has the minor label
• The variation matches its Figma design.
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• A new story has been added to the component's existing Storybook page
• Any Chromatic UI snapshot changes have been accepted by a design reviewer
• Tested in vets-website using Verdaccio
• Engineering has approved the PR
• Design has approved the PR

🐞 Component Fix

• The PR has the patch label
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any markup changes are evaluated for impact on vets-website.
  • Will any vets-website tests fail from the change?
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR

♿️ Component Fix - Accessibility

• The PR has the patch label
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR
• Accessibility has approved the PR

🚨 Component Fix - Breaking API Change

• The PR has the major label
• vets-website and content-build have been evaluated to determine the impact of the breaking change
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Tested in vets-website using Verdaccio
• Engineering has approved the PR

🔧 Component Update - Non-Breaking API Change

• The PR has the minor label
• Any new properties, custom events, or utility functions have e2e and/or unit tests
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR

📖 Storybook Update

• The PR has the ignore-for-release label
• Any Chromatic UI snapshot changes have been reviewed and approved by a designer if necessary
• Engineering has approved the PR

🎨 CSS-Library Update

• The PR has the css-library label
• vets-website and content-build have been checked to determine the impact of any breaking changes
• Engineering has approved the PR

[babsdenney]

Such a big improvement! Very exciting!

[RyanMunsch]

Good stuff, @danbrady! Just this one small thing on my end but this is looking good to me!

[RyanMunsch]

LGTM. The component looks much cleaner now 😎

[amyleadem]

The modal is looking so much better! Thanks @danbrady

I had a few questions and suggestions in the comments below. Let me know if you have any questions!

[danbrady]

@amyleadem Ready for your re-review! 🙏

[amyleadem]

Code changes are looking good! Just a couple open design questions/issues.

[amyleadem]

Confirming that all of the open comments have been addressed. Nice work!

However, as a final check I took a look at the components that use va-modal, and found this vertical spacing inconsistency in va-file-input:

Previously the footer used the .usa-modal__footer class, which had a top margin of 3rem. Can that (or something similar) be restored here?

Note that I also checked va-crisis-line-modal, va-omb-info in Chrome and desktop and mobile widths and they looked good.

[danbrady]

Amy is officially in the running for a 🦅👁️🏆!

I restored the USWDS class that adds 1.5rem top margin on the modal footer to give the buttons enough breathing room from the content above.

[amyleadem]

LGTM!

I found one possible style issue that I am considering optional, but the bottom padding on the large variant seems to be excessive and does not match the default variant. This was there in previous reviews, but the increase in the top margin of the footer just made it more pronounced. If this wasn't intentional, I recommend we reduce that vertical space.

[danbrady]

@amyleadem Ah, ok. The USWDS styles were injected that extra spacing in. I raised the specificity of our va- to counteract them. Thanks!