Accessibility
Responsive, zoom and touch review
Evaluate the native phone composition and constrained-height controls separately from full-content exports.
On this page
Capture baseline
| View | CSS dimensions | Evidence |
|---|---|---|
| Desktop | 1440 × 1000 at DPR 2 | Normal app viewport |
| Phone | 390 × 844 at DPR 2 | Native small-screen composition |
| Component crop | Actual source element/union box at DPR 2 | No resizing or stretching |
| Full content | Measured scroller content height + header at DPR 2 | Supplemental reading artifact, not phone viewport behavior |
Checks and remaining work
- Check no horizontal document overflow at capture sizes.
- Check dialog close/footer visibility. Tall forms exposed a source containment gap: auto-scrolling may move the outer hidden dialog, clipping header/footer. Full-content details use a taller recorded viewport rather than altering source CSS.
- Check chips and message titles wrap without forcing controls offscreen.
- Mobile People hides organization/owner/follow-up columns; profile supplies fuller context.
- Some small remove-chip controls are 20px; assess target spacing and WCAG target-size exceptions.
- Screenshots do not establish usability at all zoom levels, screen-reader support or device safe-area behavior.
Source references
| File | Responsibility |
|---|---|
| app/globals.css | Scroll and tap policy |
| components/ui/primitives.tsx | Control dimensions |
| components/ui/dialog.tsx | Dynamic viewport dialog |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0