Mobile Users + Backups tables: stacked cards + selection (Slice 5)

Below md, the Users directory and the three Backups tables render as
MobileCardRow cards:

- UsersPage: display name primary; username/activity/email fields. Each
  card carries a selection checkbox (44px via mobile-touch-target) in the
  actions slot with stopPropagation so toggling selection does not open
  the drawer; card-body tap still opens the drawer.
- BackupAlertsTable: alert message primary; severity/type/created fields;
  Acknowledge action preserved in actions slot.
- BackupJobsTable: job name primary; source/schedule/last-status fields
  (joins latestRuns into a JobCardRow).
- BackupRunsTable: run job_id primary; status/duration/size/started fields;
  status-filter Select renders above both layouts (preserved on mobile).

Desktop (md+) is byte-for-byte identical for all four components -- the
UsersPage diff is dominated by re-indenting the existing Table into the
isMobile ternary else branch.

Fix from Slice 5 review: MobileCardRow now renders the clickable card as
<div role=button tabIndex=0> with Enter/Space keyboard handling instead
of <button>, so nesting a Radix Checkbox (which renders a <button>) in
the actions slot produces valid HTML. The desktop-parity argument for
<button>-in-<button> did not hold (desktop rows are <tr>, not buttons).

Cross-cutting: useIsMobile hardened with typeof window.matchMedia guard
(safe in real browsers; only changes jsdom crash -> false). The file-local
900px compose hook was renamed useComposeViewport to avoid collision with
the shared 768px useIsMobile.

Tests: BackupJobsTable test file added (was untested), UsersPage mobile
selection round-trip + stopPropagation, mobile card render across all
four components. 105 tests pass; lint/build green.

Refs openspec/changes/mobile-responsive-parity/ (spec R3, tasks slice 5).

frontend/src/components/__tests__/BackupRunsTable.test.tsx

@@ -1,4 +1,4 @@
-import { describe, it, expect } from "vitest";
+import { describe, it, expect, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import BackupRunsTable from "../BackupRunsTable";
 import type { BackupRun } from "../../types/backups";
@@ -57,3 +57,29 @@ describe("BackupRunsTable", () => {
 		expect(screen.getByText("2.0 KB")).toBeInTheDocument();
 	});
 });
+
+// jsdom lacks matchMedia; default to desktop so existing tests are unaffected.
+function setMatchMedia(matches: boolean) {
+	window.matchMedia = ((query: string) => ({
+		matches: query.includes("768") ? matches : false,
+		media: query,
+		onchange: null,
+		addEventListener: () => {},
+		removeEventListener: () => {},
+		addListener: () => {},
+		removeListener: () => {},
+		dispatchEvent: () => false,
+	})) as unknown as typeof window.matchMedia;
+}
+
+beforeEach(() => setMatchMedia(false));
+
+describe("BackupRunsTable (mobile card layout — slice 5)", () => {
+	it("renders cards with job_id as primary below md", () => {
+		setMatchMedia(true);
+		render(<BackupRunsTable runs={[run({ id: "r1", job_id: "nightly" })]} />);
+		expect(screen.getByText("nightly")).toBeInTheDocument();
+		expect(screen.getAllByText("Status")).toHaveLength(1);
+		expect(screen.getAllByText("Duration")).toHaveLength(1);
+	});
+});