manage/.pi-tmp/slice5-review.md

Slice 5 Review — Users + Backups mobile card layout

Change: mobile-responsive-parity · Slice: 5 (Users + Backups tables) Reviewer mode: fresh adversarial · Date: 2026-06-26 Verdict: fix-then-commit (one real HTML-validity issue; everything else clean)

---

Commands run (all green)

Command	Result	Notes
npm run lint	✅ 0 errors	Only 2 pre-existing react-hooks/exhaustive-deps warnings in UsersPage.impl.tsx (lines 149/188). Verified identical on HEAD (lines 120/159) — not introduced by this slice.
npm run build	✅ built	tsc -b typecheck clean (build runs it).
npm run test	✅ 25 files / 102 tests	All pass.
git diff --cached --stat	empty	No staged files.

---

1. useIsMobile hardening — SAFE ✅

frontend/src/hooks/useIsMobile.ts: added typeof window.matchMedia === "function" to both the lazy useState initializer and the useEffect guard.

• In real browsers window.matchMedia is always a function, so the added predicate is always true and behavior is identical.
• In jsdom (no native matchMedia) the change converts a hard TypeError ("window.matchMedia is not a function") into a graceful false (desktop). This is strictly safer — it can only turn a crash into a non-crash.
• All existing consumers (App.tsx, Dashboard, Media, FileBrowser) already stub matchMedia in their test files, so their tests are unaffected. Confirmed no regression path for slices 1–4.

Conclusion: safe across all consumers; no regression.

---

2. UsersPage desktop Table — preserved EXACTLY ✅

I programmatically extracted the <Table aria-label="Users table">…</Table> block from HEAD and from the working tree and diffed them token-for-token.

• The only differences are line re-wrapping caused by deeper indentation (e.g. the checked || selectedUser?.jellyfin_id === row.jellyfin_id expression and onClick={() => setSearchParams({ user: row.jellyfin_id })} wrap onto more lines). Every token, attribute, and child is present in both.
• Columns preserved (10): select-all checkbox header, User, Email, Activity, Type (hidden md), Jellyseerr, Role (hidden md), Permissions, Reqs (hidden md), Contact (hidden md).
• Header checkbox toggleVisibleSelection — preserved.
• Row checkbox toggleUserSelected + onClick={(event) => event.stopPropagation()} + aria-label — preserved.
• Row click onClick={() => setSearchParams({ user: row.jellyfin_id })} — preserved.
• Avatar (AvatarImage/AvatarFallback), username fallback, all <Badge> variants, data-state="selected", cursor-pointer — all preserved.

Conclusion: the desktop branch is the original table re-indented one level deeper into the : ( else arm. No prop, column, or handler was dropped. Diff stat (207 ins / 149 del) is dominated by this re-indentation; the true behavioral delta is small (cards branch + userCardFields + useComposeViewport rename).

---

3. Compose hook rename — correct ✅

The file-local 900px useIsMobile was renamed useComposeViewport; the shared 768px useIsMobile (from hooks/) now drives the directory-table branch.

• isComposeMobile (900px) → used only at UsersPage.impl.tsx:827 for the compose DialogContent full-screen class. Breakpoint unchanged ((max-width: 900px)).
• isMobile (768px) → used only at UsersPage.impl.tsx:511 for the table/card branch.
• Verified no stray references to the old local name remain (grep confirms 2 distinct symbols, correctly wired).

---

4. Backups cards (3 components) ✅

• BackupAlertsTable: mobile branch renders MobileCardRow with primary=message + severity/type/created; Ack action preserved in the actions slot (mobile-touch-target, calls onAcknowledge(a.id); hidden when acknowledged). Desktop <Table> block is byte-identical (diff is purely additive before the return).
• BackupJobsTable: mobile branch builds JobCardRow[] (joins latestRuns exactly as the desktop row does) with primary=name + source/schedule/last-status. No per-row action exists in the desktop original, so none is "lost". Desktop table unchanged.
• BackupRunsTable: status-filter <Select> is rendered outside the isMobile ? … : … ternary, so it stays available on both layouts (correct — filter preserved on mobile). Mobile card primary=job_id + status/duration/size/started. The desktop <Table> is re-indented into the : ( else arm but content is identical (same 5 columns, same formatters, same statusVariant).

Spec R3.2 (primary + 3–5 fields) satisfied for all three. Spec R3.6 (desktop unchanged) satisfied.

---

5. UsersPage mobile selection — INVALID HTML NESTING (confirmed issue)

MobileCardRow renders the card as a <button type="button"> whenever onRowClick is set (mobile-card.tsx:82). The UsersPage mobile branch passes both onRowClick (opens drawer) and an actions slot containing a Radix <Checkbox>, which itself renders a <button role="checkbox">. Result:

<button>   <!-- card -->
  …
  <button role="checkbox"></button>   <!-- selection checkbox -->
</button>

This is invalid HTML (<button> cannot contain interactive <button>).

The review brief asks whether this is "a real runtime bug or acceptable parity with the existing desktop pattern." Findings:

• The desktop-parity argument does not hold. On desktop the row is a <TableRow> → <tr> with onClick. A <tr> is not a <button>, so nesting a checkbox inside it is valid. The mobile variant introduces a new <button>-in-<button> nesting that does not exist on desktop.
• Runtime impact: browsers perform error-correction by closing the outer <button> before the inner one starts. The 102 tests pass (jsdom does not enforce this), and in practice the card body still receives taps while the checkbox still toggles (with stopPropagation). So it functions — but only by accident of browser error-recovery. It is fragile, fails HTML validation, and is an a11y issue (nested interactive elements).
• This pattern is not present in the other two card usages in this slice (BackupJobs/Runs pass no onRowClick; Alerts passes actions but no onRowClick), so it is isolated to UsersPage.

Recommended fix (small, localized): in MobileCardRow, when onRowClick is set, render the outer element as a <div role="button" tabIndex={0} with onClick + onKeyDown (Enter/Space) instead of a <button>; or move the actions slot outside the clickable button element. Either keeps the 44px tap target and the stopPropagation semantics while producing valid HTML. This also improves on the desktop pattern rather than replicating its weakest aspect.

Severity: I am calling this must-fix before commit because (a) the brief specifically flagged it, (b) it is invalid DOM, and (c) the fix is tiny and contained to mobile-card.tsx (already shipped in Slice 1, so fixing it here benefits every future card consumer too).

---

6. Test quality

• BackupAlertsTable.test.tsx: new mobile tests assert primary text + Ack button round-trip (onAcknowledge called with id). Real behavior. ✅
• BackupRunsTable.test.tsx: asserts job_id primary + Status/Duration labels on mobile. Does not exercise the status filter on mobile, but coverage is adequate. ✅
• UsersPage.test.tsx: asserts display-name primary + Activity label per card on mobile. Does NOT assert toggleUserSelected round-trip nor that the checkbox stopPropagation prevents the drawer opening — the two behaviors the brief specifically called out. The implementation is present and correct, but the assertions are missing. (Suggestion, not a blocker.)
• BackupJobsTable: no test file exists, so the worker skipped it. BackupJobsTable.tsx is a touched file with zero direct test coverage. The card logic mirrors the other two and is low-risk, but AC8 ("at least one Vitest test per touched page/component asserting <768 and ≥768") is not fully met for this component. (Suggestion.)

Minor: UsersPage.test.tsx:12 comment still says "MUI useMediaQuery (still used by the compose dialog, slice 6b)" — stale after the rename to useComposeViewport (no longer MUI). Cosmetic.

---

7. Diff size

UsersPage +207 / -149. Subtracting the re-indented desktop Table block (~149 deletions re-added as ~180 insertions one indent level deeper), the genuine behavioral delta is: userCardFields constant (~22 lines), the mobile MobileCardRow branch (~30 lines), the useComposeViewport rename (3 lines), and isComposeMobile usage. Confirmed: actual behavioral change is small; the bulk is re-indentation, as the brief expected.

---

Summary

• Blocker / confirmed issue (must-fix): MobileCardRow + UsersPage produce <button> nesting a Radix <button> checkbox — invalid HTML; "desktop parity" justification does not hold (desktop uses <tr>). Fix in mobile-card.tsx (render clickable card as div role="button" or lift actions out of the button).
• Suggestions (non-blocking):
  • Add a UsersPage mobile test asserting toggleUserSelected round-trip + checkbox stopPropagation.
  • Add a BackupJobsTable mobile test (currently zero coverage on a touched file).
  • Refresh the stale "MUI useMediaQuery" comment in UsersPage.test.tsx.
• Verified clean: useIsMobile hardening (no regression), desktop UsersPage Table preserved exactly (token-identical), compose 900px breakpoint preserved, all 3 Backups desktop tables byte-identical, status filter + Ack action preserved on mobile, lint/build/test green, no staged files.

Verdict: fix-then-commit — resolve the single button-in-button HTML validity issue (localized to mobile-card.tsx), then this slice is good to commit. The two test-coverage suggestions can land in the same commit or a follow-up.

{
  "criteriaSatisfied": [
    {
      "id": "criterion-1",
      "status": "satisfied",
      "evidence": "Slice 5 implements Users + 3 Backups mobile card layouts per spec R3.1/R3.2/R3.3 and tasks 5.1/5.2/5.3 without widening scope (no backend, no new product behavior, no sm: breakpoint). Desktop layouts preserved exactly; only presentation-layer parity added."
    }
  ],
  "changedFiles": [
    "frontend/src/hooks/useIsMobile.ts",
    "frontend/src/components/BackupAlertsTable.tsx",
    "frontend/src/components/BackupJobsTable.tsx",
    "frontend/src/components/BackupRunsTable.tsx",
    "frontend/src/components/__tests__/BackupAlertsTable.test.tsx",
    "frontend/src/components/__tests__/BackupRunsTable.test.tsx",
    "frontend/src/pages/UsersPage.impl.tsx",
    "frontend/src/pages/__tests__/UsersPage.test.tsx"
  ],
  "testsAddedOrUpdated": [
    "frontend/src/components/__tests__/BackupAlertsTable.test.tsx",
    "frontend/src/components/__tests__/BackupRunsTable.test.tsx",
    "frontend/src/pages/__tests__/UsersPage.test.tsx"
  ],
  "commandsRun": [
    {
      "command": "cd frontend && npm run lint",
      "result": "passed",
      "summary": "0 errors; 2 pre-existing react-hooks/exhaustive-deps warnings (verified identical on HEAD, not introduced by slice 5)."
    },
    {
      "command": "cd frontend && npm run build",
      "result": "passed",
      "summary": "vite build + tsc -b typecheck clean; 1976 modules transformed."
    },
    {
      "command": "cd frontend && npm run test",
      "result": "passed",
      "summary": "25 test files / 102 tests passed (vitest)."
    },
    {
      "command": "git diff --cached --stat",
      "result": "passed",
      "summary": "Empty — no staged files."
    }
  ],
  "validationOutput": [
    "useIsMobile guard safe: only changes jsdom (crash->false); real browsers unchanged; no regression to App/Dashboard/Media/FileBrowser consumers.",
    "UsersPage desktop <Table> block token-diffed against HEAD: identical except line re-wrapping from deeper indentation; all 10 columns, header/row checkboxes, toggleVisibleSelection/toggleUserSelected, setSearchParams row click, Avatar, all Badge variants preserved.",
    "Compose 900px breakpoint preserved via useComposeViewport rename; isMobile (768px) used only for table branch, isComposeMobile (900px) only for compose dialog.",
    "BackupRunsTable status-filter Select rendered outside isMobile ternary -> preserved on mobile+desktop; BackupAlertsTable Ack action preserved in card actions slot; BackupJobsTable has no per-row actions to lose.",
    "Desktop Backups tables byte-identical (Alerts/Jobs additive only; Runs re-indented into else arm, content equal)."
  ],
  "residualRisks": [
    "BLOCKER: MobileCardRow renders a <button> and UsersPage nests a Radix Checkbox (<button>) inside it when onRowClick is set -> invalid HTML (button-in-button). Functions via browser error-correction but fails validation and is an a11y issue. Desktop parity argument does not hold (desktop row is a <tr>, not a button). Fix in frontend/src/components/ui/mobile-card.tsx.",
    "BackupJobsTable.tsx is a touched file with no test file -> zero direct coverage; AC8 not fully met for this component.",
    "UsersPage mobile test does not assert toggleUserSelected round-trip nor checkbox stopPropagation (behaviors are implemented but untested).",
    "Stale comment in UsersPage.test.tsx references 'MUI useMediaQuery' after the useComposeViewport rename (cosmetic)."
  ],
  "noStagedFiles": true,
  "diffSummary": "Slice 5 adds mobile MobileCardRow branches to UsersPage + 3 Backups tables, renames the local 900px compose hook to useComposeViewport to avoid collision with the shared 768px useIsMobile, and hardens useIsMobile with a typeof matchMedia guard. UsersPage diff is ~356 lines but mostly re-indentation of the preserved desktop Table into an isMobile ternary else branch; true behavioral delta is small.",
  "reviewFindings": [
    "blocker: frontend/src/components/ui/mobile-card.tsx:82 + frontend/src/pages/UsersPage.impl.tsx:511-530 — <button> card nests Radix <button> Checkbox (invalid HTML); fix MobileCardRow to render clickable card as div role=button or lift actions slot out of the button.",
    "suggestion: add UsersPage mobile test for toggleUserSelected round-trip + stopPropagation.",
    "suggestion: add BackupJobsTable mobile test (touched file, currently untested).",
    "suggestion: refresh stale 'MUI useMediaQuery' comment in UsersPage.test.tsx:12."
  ],
  "manualNotes": "Verdict: fix-then-commit. The single button-in-button issue is localized to mobile-card.tsx (a Slice-1 primitive) and benefits all future card consumers once fixed. Everything else (useIsMobile safety, desktop non-regression, compose breakpoint, Backups parity, lint/build/test) is verified clean."
}