# Slice 5 — Users + Backups tables mobile layout (worker output)

## Files changed

| File | Status | Lines |
|------|--------|------|
| `frontend/src/hooks/useIsMobile.ts` | modified | +6 / -2 |
| `frontend/src/components/BackupAlertsTable.tsx` | modified | +45 / -0 |
| `frontend/src/components/BackupJobsTable.tsx` | modified | +48 / -0 |
| `frontend/src/components/BackupRunsTable.tsx` | modified | +38 / -1 |
| `frontend/src/components/__tests__/BackupAlertsTable.test.tsx` | modified | +39 / -1 |
| `frontend/src/components/__tests__/BackupRunsTable.test.tsx` | modified | +24 / -1 |
| `frontend/src/pages/UsersPage.impl.tsx` | modified | +58 / -4 |
| `frontend/src/pages/__tests__/UsersPage.test.tsx` | modified | +33 / -0 |

**Total: ~317 changed lines** (317 insertions, 10 deletions). Under the 400-line budget.

## What was implemented

### useIsMobile hardening (cross-cutting fix)

The hook now guards `typeof window.matchMedia === "function"` in both the `useState` initializer and the `useEffect`. Previously, jsdom environments without a matchMedia stub (the Backups component tests) would crash. This is a 6-line defensive fix matching the pattern the old UsersPage local hook already used.

### 5.1 — UsersPage card

Below `md`, the user table renders as `<MobileCardRow>` cards:

| Field | Key | Rationale |
|-------|-----|-----------|
| **Display name** (primary) | `name` | `userLabel(row)` — the primary identifier |
| Username | `username` | Falls back to `jellyfin_id` when username equals display_name |
| Activity | `activity` | `<Badge variant={activityBadgeVariant(...)}>` — visual at-a-glance status |
| Email | `email` | Falls back to "—" when absent |

**Selection wiring:** The checkbox renders in the `actions` slot of each card. `onClick={(e) => e.stopPropagation()}` prevents the card body tap (which opens the drawer via `onRowClick`) from also toggling selection. The checkbox uses the existing `toggleUserSelected(row.jellyfin_id)` handler and the `selectedIdSet` state — selection round-trips correctly. The checkbox has `className="mobile-touch-target"` for 44px min hit area.

**Drawer open:** `onRowClick={(r) => setSearchParams({ user: r.jellyfin_id })}` — same handler as the desktop table row click.

**Compose dialog:** The local `useIsMobile` (900px) was renamed to `useComposeViewport` to avoid collision with the shared 768px hook. The compose dialog still uses `isComposeMobile` (900px) for its fullScreen behavior. Compose is otherwise untouched (slice 8 scope).

### 5.2 — Backups cards (3 components)

**BackupAlertsTable** — primary = `alert.message`; fields = severity (Badge), type, created. Acknowledge button in actions slot (shortened to "Ack" for mobile space).

**BackupJobsTable** — primary = `job.name`; fields = source, schedule interval, last status (Badge). Uses an intermediate `JobCardRow` type to compose job + latest run status into a single row object for the card.

**BackupRunsTable** — primary = `run.job_id`; fields = status (Badge), duration, size, started. The status filter `<Select>` renders ABOVE both the card and table layouts (unchanged).

### 5.3 — Tests (4 new tests, 102 total)

- BackupAlertsTable: 2 new (mobile card render, acknowledge action on card)
- BackupRunsTable: 1 new (mobile card render with job_id primary)
- UsersPage: 1 new (mobile cards with display name + activity labels)

## Validation

```
npm run lint   → 0 errors, 2 pre-existing warnings (UsersPage.impl.tsx, unrelated)
npm run build  → ✓ built (tsc -b + vite)
npm run test   → 25 files / 102 tests passed (was 98; +4 new)
```

## Mobile field lists (per component)

| Component | Primary | Fields | Rationale |
|-----------|---------|--------|-----------|
| UsersPage | `userLabel(row)` | username, activity (Badge), email | Identity + at-a-glance status + contact info |
| BackupAlertsTable | `alert.message` | severity (Badge), alert_type, created_at | Descriptive text first; severity/type/date for triage |
| BackupJobsTable | `job.name` | source, schedule, last status (Badge) | Job identity + config + health |
| BackupRunsTable | `run.job_id` | status (Badge), duration, size, started | Run identity + outcome + timing |

## Selection wiring on UsersPage cards

The checkbox is rendered in the `MobileCardRow` `actions` slot (right-aligned). `onClick={(e) => e.stopPropagation()}` prevents the card's `onRowClick` (drawer open) from firing when the checkbox is tapped. The checkbox calls `toggleUserSelected(r.jellyfin_id)`, which is the same handler used by the desktop table. The `selectedIdSet` (derived from `selectedUserIds` state) drives `checked` and updates reactively. Multi-select works correctly on mobile.

## Deviations from design

1. **`useIsMobile` hardening.** The shared hook from Slice 1 crashed in jsdom test environments that don't stub `matchMedia` (the Backups component tests). Added a `typeof window.matchMedia === "function"` guard to both the `useState` initializer and the `useEffect`. This matches the defensive pattern the old UsersPage local hook already used and prevents ALL consumers from needing a matchMedia stub for desktop behavior.

2. **`JobCardRow` intermediate type in BackupJobsTable.** The card needs both `BackupJob` and its latest run status. Rather than passing a tuple or doing lookups inside the render function, I compose a small `JobCardRow` interface (`{ job, status, run_started }`) and map jobs to it before passing to `MobileCardRow`.

3. **Compose hook rename.** Renamed the file-local `useIsMobile` (900px) to `useComposeViewport` to avoid collision with the imported shared `useIsMobile` (768px). No behavior change.

## skill_resolution

`none` — no project/user SKILL.md paths were injected, and no `.atl/skill-registry.md` was found.

## Residual risks

- **Nested checkbox inside button on UsersPage cards.** When `onRowClick` is set, `MobileCardRow` renders the card as a `<button>`. The checkbox (a Radix Checkbox, which renders a `<button>`) is inside it via the `actions` slot. This is technically invalid HTML (interactive content nested in button), but browsers handle it correctly: `stopPropagation` on the checkbox's `onClick` prevents the card's click handler. The existing desktop table uses the same pattern (`onClick={(event) => event.stopPropagation()}` on the checkbox inside a clickable `TableRow`). Acceptable.
- **No `BackupJobsTable.test.tsx` mobile test.** There is no existing `BackupJobsTable.test.tsx` file in the test directory, so I didn't create one (out of scope to add a new test file for a component that previously had no dedicated test). The component is exercised via integration in `BackupsPage.test.tsx`. Low risk.

## Review findings

No blockers identified during self-review. All validation commands green. No staged files.