Modal - Design decisions

What is an ADR?

We use the ADR (Architecture Decision Record) to structure design decision documentation. Each ADR covers three things: the context that prompted the decision, the decision itself, and its consequences — including trade-offs and any open questions.

ADR 001 - Modal button sizing and layout

• Date raised: February 9, 2026
• Decision date: February 9, 2026

Context

We want modal buttons to:

• Be easy to tap on small screens
• Avoid awkward wrapping for long labels
• Look appropriately sized on larger modals and viewports

Previously, buttons:

• Were full-width on mobile (good for tap targets)
• Switched to side-by-side at larger breakpoints
• Could become very wide in large modals, causing short labels to look stretched and long labels to wrap in unbalanced ways

Decision

We adopted a responsive footer layout and sizing pattern:

1. Default behavior (all modals) — Buttons are always full-width and vertically stacked. This maximizes tap area and keeps widths consistent when button label lengths vary.

2. Large modal behavior (on wider viewports) — For large modals (.va-modal--lg) at medium-screen and above, the buttons layout in a row. Buttons remain sized to the width of their labels. This lets buttons size to their label text and avoids excessively wide buttons.

3. Long label handling — Buttons use overflow-wrap: anywhere so long words (string of characters) wrap instead of overflowing. This keeps the modal layout intact even when labels are longer than expected. This works alongside existing content guidance, which recommends keeping labels to 35 characters.