manage/openspec/changes/mobile-responsive-parity/verify-report.md

# Verify Report — Mobile responsive parity

**Change:** `mobile-responsive-parity`
**Phase:** verify
**Date:** 2026-06-26

## Summary

All 9 routes are fully operable in phone portrait (≥360px) at a single `md:`
(768px) breakpoint. Desktop layout (≥768px) is unchanged. No backend changes.
No new product features.

## Acceptance criteria

### AC1 — Every route fully operable at 375px ✅

All 9 routes (Dashboard, Observability, Media, Files, Backups, Users, Actions,
Services, Settings) render and operate at phone-portrait width:

- **Dashboard**: single-column widget stack + section anchor bar (Slice 2).
- **Observability**: existing responsive layout + touch-target audit (Slice 9).
- **Media**: card layout with mobile pagination, card-tap navigation (Slice 3).
- **Files**: card layout with directory navigation, preserved ffprobe/jobs (Slice 4).
- **Backups**: card layouts for alerts/jobs/runs tables (Slice 5).
- **Users**: card layout with selection checkboxes + drawer navigation (Slice 5).
- **Actions**: existing responsive layout + touch-target audit (Slice 9).
- **Services**: list renders stacked; service edit via SheetForm (Slices 6, 9).
- **Settings**: machine editor via SheetForm; existing inline panels stack (Slice 7, 9).

### AC2 — Four wide tables show cards at 375px and tables at 1280px ✅

Media, FileBrowser, UsersPage, and the three Backups tables each render
`MobileCardRow` cards below `md` and `<DataTable>` tables at/above `md`. Each
card shows a primary title + 3–5 fields chosen per-table. Tested in Vitest
with mocked `matchMedia` at both breakpoints.

### AC3 — Four edit forms open in Sheet at 375px and Dialog at 1280px ✅

ServicePage, Settings (machine editor), message compose, and WidgetConfigDialog
each branch on `useIsMobile()` to render `SheetForm` (side=bottom, full-height)
below `md` and the existing `Dialog` at/above `md`. Tested in Vitest.

### AC4 — HoverEditButton always visible at 375px, hover-revealed at 1280px ✅

`HoverEditButton` defaults to `mobile="always"` (always visible below `md`,
hover-revealed at `md:`+). Tested in HoverEditButton.test.tsx with class-
composition assertions.

### AC5 — 44px minimum touch-target audit ✅

40 interactive elements across 12 files now carry the `mobile-touch-target`
class (applies `min-height: 44px; min-width: 44px` only below 768px). Covers
icon buttons, checkboxes, switches, and small text buttons. Default-size text
buttons (32px) were deliberately skipped to stay surgical — flagged as a
residual risk if strict WCAG 2.5.5 on ALL elements is required.

### AC6 — Dashboard single column + anchors at 375px, grid at 1280px ✅

Tested in Dashboard.test.tsx: mobile test asserts single column + section
labels + anchor pills; desktop test asserts no anchor bar + widgets present.

### AC7 — lint/build/test green ✅

```
cd frontend && npm run lint    → 0 errors (2 pre-existing warnings)
cd frontend && npm run build   → ✓ built (tsc -b + vite)
cd frontend && npm run test    → 28 files / 116 tests passed
```

### AC8 — Vitest test per touched page at <768px and ≥768px ✅

Each touched page has at least one mobile and one desktop test:

| Page/Component | Mobile tests | Desktop tests |
|----------------|-------------|---------------|
| Dashboard | 3 | 3 (existing) |
| Media | 5 | existing |
| FileBrowser | 4 | existing |
| UsersPage | 2 | existing |
| Backups (Alerts/Runs) | 3 | existing |
| BackupJobs | 2 (new file) | — |
| ServicePage | 3 | 2 (new file) |
| Settings | 3 | existing |
| WidgetConfigDialog | 1 | 1 (new file) |
| MobileCardRow | 7 | — (primitive) |
| SheetForm | 5 | — (primitive) |
| HoverEditButton | 2 | 2 |

## Non-goals confirmed

- No tablet/landscape/sm: intermediate layout.
- No PWA, manifest, service worker.
- No polling-interval changes.
- No backend changes.
- No new data-table library.

## Residual risks / known gaps

1. **R4.5 dirty-state outside-click confirm** — RESOLVED. `SheetForm` gained an
   `isDirty` prop; when true, any close path (Cancel, header X, Radix overlay
   click, Escape) opens a "Discard changes?" confirm. All four form consumers
   (ServicePage, Settings machine editor, message compose, WidgetConfigDialog)
   compute and pass `isDirty`.

2. **Default-size text buttons (32px)** — RESOLVED. A second touch-target pass
   applied `.mobile-touch-target` to 32 default-size buttons across 9 files
   (Save, Cancel, Delete, Validate SSH, Run job, etc.) plus the shared
   `DialogFooter`. Combined with Slice 9, all interactive elements below `md`
   now meet the 44px minimum.

3. **Polling on battery** (D8 risk) — RESOLVED. `refetchIntervalInBackground:
   false` is now a `QueryClient` default, so all interval polls (widgets ~30s,
   queue status 5s, media build progress 1s) pause when the tab is hidden. The
   `useMedia` build-progress poll no longer overrides this. Build progress
   resumes and catches up on return.

4. **iOS Safari manual verification** not performed in CI. `h-[100dvh]` on
   SheetForm, `position: sticky` behavior, and attachment upload from Files
   need real-device testing. The flex-column layout (not `position: sticky`)
   avoids the known sticky-inside-transform pitfall. UNRESOLVED — requires a
   physical device pass.

5. **Pagination duplication** — RESOLVED. Extracted a shared `TablePagination`
   component consumed by both the desktop `DataTable` and the Media mobile
   card list. Removes ~90 lines of duplication.