fix(AlertDialog): keep actions readable on narrow surfaces

[rubyycheung]

Summary

• make AlertDialog geometry and action reflow follow the available viewport width instead of touch, pointer, or hover capability
• keep the existing >640px 400px centered dialog and horizontal Cancel/destructive action row
• at <=640px, fill available width with token gutters, stack destructive above Cancel, and keep complete decision labels wrapping without increasing the default 32px Button size
• update the responsive stories, docs, tests, and changeset

Responsive and Interaction Readiness

Responsive layout

Check	Result	Evidence
Wide viewport + fine pointer + hover	Pass	The wide branch keeps the requested width, defaulting to 400px, with horizontal Cancel/destructive actions.
Narrow viewport + fine pointer + hover	Pass	The narrow branch fills the available viewport width with token gutters and uses the stacked action layout.
Content fit/action order/wrapping	Pass	Narrow actions render destructive above Cancel; both buttons fill the row and complete labels wrap instead of truncating.
Reference states and responsive tests	Pass	Stories DesktopFinePointer, NarrowFinePointer, and MobileTouch are reference states. Responsive behavior is verified by tests for the wide layout, narrow fine-pointer layout, and mobile-touch layout.

Touch, pointer, and hover

Check	Result	Evidence
Narrow viewport + coarse pointer + no hover	Pass	Uses the same narrow stacked layout as narrow fine-pointer.
Wide viewport + coarse pointer + no hover	Pass	Layout is controlled by viewport width only, so a wide touch/coarse/no-hover viewport still uses the wide layout.
Pointer/hover independence	Pass	The diff keys geometry and action reflow to available width, not touch, pointer, or hover capability.
Gestures	N/A	AlertDialog has no swipe dismissal path, and this diff does not add one.

Accessibility and interaction contracts

Check	Result	Evidence
WCAG 2.2 AA target size	Pass	The default Button target remains 32px, and narrow wrapping keeps that as the minimum height, above WCAG 2.5.8's 24px minimum.
Role/semantics	Pass	The diff does not change AlertDialog's role or ARIA wiring; existing tests still cover role="alertdialog" and aria-modal.
Keyboard/focus/dismissal	Pass	The diff does not change keyboard, focus, or Dialog dismissal code paths. Existing tests still cover Escape cancel, Enter/Space activation, Tab order, initial cancel focus, and focus return; AlertDialog still uses purpose="form", so backdrop/scrim click dismissal is not enabled.
Motion/reduced motion	N/A	This diff does not change Dialog animation or reduced-motion behavior.

Mobile viewport constraints

Check	Result	Evidence
Software keyboard	N/A	This diff changes width and action-row layout only; it does not change software-keyboard handling.
Safe area/dynamic viewport ownership	N/A	The diff uses the existing Dialog viewport ownership model and does not change safe-area behavior.

Test plan

• pnpm exec prettier --check packages/core/src/AlertDialog/AlertDialog.tsx packages/core/src/AlertDialog/AlertDialog.test.tsx apps/storybook/stories/AlertDialog.stories.tsx packages/core/src/AlertDialog/AlertDialog.doc.mjs .changeset/alert-dialog-responsive-actions.md
• pnpm exec vitest run packages/core/src/AlertDialog/AlertDialog.test.tsx
• pnpm check:repo

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
astryx	Ready	Preview	Aug 23, 2026 3:33am

[github-actions]

PR Analysis Report

📚 Storybook Preview

View Storybook for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

🧪 Sandbox Preview

View Sandbox for this PR
GitHub Pages may take up to a minute to hydrate after deploy.

Modified Components

AlertDialog _{(@astryxdesign/core)} · View in Storybook

Metric	Before	After	Delta
Bundle Size (ESM)	N/A	N/A	N/A
Lines of Code	N/A	181	-
Complexity	N/A	Medium (13)	-

Bundle Size Summary

Package	Size (ESM)	Size (CJS)	Gzipped
@astryxdesign/core	N/A	4.8KB	1.2KB

Accessibility Audit

Status: No accessibility violations detected.

---

_{Generated by PR Enrichment workflow | Storybook | Sandbox | View full report}