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).
Mobile FileBrowser: stacked cards for file list (Slice 4)
2026-06-26 13:24:19 +00:00 · 2026-06-26 12:53:25 +00:00 · 2026-06-26 12:43:09 +00:00 · 2026-06-26 12:25:42 +00:00 · 2026-06-26 12:09:21 +00:00 · 2026-06-26 11:49:47 +00:00
27 changed files with 2430 additions and 246 deletions
@@ -28,6 +28,7 @@ import { getOidcConfig, isOidcConfigured, setAccessToken } from "./auth";
 import { fetchAppVersion } from "./api/client";
 import { FRONTEND_VERSION_LABEL } from "./version";
 import { usePersistentState } from "./hooks/usePersistentState";
+import { useIsMobile } from "./hooks/useIsMobile";
 import { Button } from "@/components/ui/button";
 import {
 	Tooltip,
@@ -316,16 +317,7 @@ function ShellLayout({
 	onToggleDarkMode: () => void;
 }) {
 	const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
-	const [isMobile, setIsMobile] = useState(
-		() => window.matchMedia("(max-width: 768px)").matches,
-	);
-
-	useEffect(() => {
-		const mql = window.matchMedia("(max-width: 768px)");
-		const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
-		mql.addEventListener("change", handler);
-		return () => mql.removeEventListener("change", handler);
-	}, []);
+	const isMobile = useIsMobile();

 	return (
 		<div className="min-h-screen bg-background">
@@ -8,6 +8,11 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
+import {
+	MobileCardRow,
+	type MobileCardField,
+} from "@/components/ui/mobile-card";
+import { useIsMobile } from "../hooks/useIsMobile";
 import type { BackupAlert } from "../types/backups";

 interface Props {
@@ -29,7 +34,51 @@ function severityVariant(severity: string): SeverityVariant {
 	return severity === "critical" ? "destructive" : "warning";
 }

+// Mobile card fields (spec R3.2): message is the primary identifier;
+// severity/type/created give the at-a-glance info. See OpenSpec change
+// `mobile-responsive-parity`, tasks slice 5.2.
+const alertCardFields: MobileCardField<BackupAlert>[] = [
+	{ key: "message", label: "Message", render: (a) => a.message, primary: true },
+	{
+		key: "severity",
+		label: "Severity",
+		render: (a) => (
+			<Badge variant={severityVariant(a.severity)}>{a.severity}</Badge>
+		),
+	},
+	{ key: "type", label: "Type", render: (a) => a.alert_type },
+	{
+		key: "created",
+		label: "Created",
+		render: (a) => formatTimestamp(a.created_at),
+	},
+];
+
 export default function BackupAlertsTable({ alerts, onAcknowledge }: Props) {
+	const isMobile = useIsMobile();
+
+	if (isMobile) {
+		return (
+			<MobileCardRow
+				rows={alerts}
+				fields={alertCardFields}
+				getRowId={(a) => a.id}
+				actions={(a) =>
+					!a.acknowledged ? (
+						<Button
+							size="sm"
+							variant="outline"
+							className="mobile-touch-target"
+							onClick={() => onAcknowledge(a.id)}
+						>
+							Ack
+						</Button>
+					) : null
+				}
+			/>
+		);
+	}
+
 	return (
 		<div className="overflow-hidden rounded-lg border border-border">
 			<Table aria-label="Backup alerts">
@@ -7,6 +7,11 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
+import {
+	MobileCardRow,
+	type MobileCardField,
+} from "@/components/ui/mobile-card";
+import { useIsMobile } from "../hooks/useIsMobile";
 import type { BackupJob, BackupRun } from "../types/backups";

 interface Props {
@@ -41,7 +46,54 @@ function statusVariant(status: string): StatusVariant {
 	return "secondary";
 }

+// Mobile card fields (spec R3.2): job name is primary; source/schedule/status
+// give at-a-glance context. See OpenSpec change `mobile-responsive-parity`.
+interface JobCardRow {
+	job: BackupJob;
+	status: string;
+	run_started: number | null;
+}
+
+const jobCardFields: MobileCardField<JobCardRow>[] = [
+	{ key: "name", label: "Name", render: (r) => r.job.name, primary: true },
+	{
+		key: "source",
+		label: "Source",
+		render: (r) => r.job.source ?? "—",
+	},
+	{
+		key: "schedule",
+		label: "Schedule",
+		render: (r) => formatInterval(r.job.schedule_interval_seconds),
+	},
+	{
+		key: "status",
+		label: "Last status",
+		render: (r) => <Badge variant={statusVariant(r.status)}>{r.status}</Badge>,
+	},
+];
+
 export default function BackupJobsTable({ jobs, latestRuns }: Props) {
+	const isMobile = useIsMobile();
+
+	if (isMobile) {
+		const cardRows: JobCardRow[] = jobs.map((job) => {
+			const run = latestRuns.get(job.id);
+			return {
+				job,
+				status: run?.status ?? "unknown",
+				run_started: run?.started_at ?? null,
+			};
+		});
+		return (
+			<MobileCardRow
+				rows={cardRows}
+				fields={jobCardFields}
+				getRowId={(r) => r.job.id}
+			/>
+		);
+	}
+
 	return (
 		<div className="overflow-hidden rounded-lg border border-border">
 			<Table aria-label="Backup jobs">
@@ -15,6 +15,11 @@ import {
 	TableHeader,
 	TableRow,
 } from "@/components/ui/table";
+import {
+	MobileCardRow,
+	type MobileCardField,
+} from "@/components/ui/mobile-card";
+import { useIsMobile } from "../hooks/useIsMobile";
 import type { BackupRun } from "../types/backups";

 interface Props {
@@ -55,8 +60,35 @@ function statusVariant(status: string): StatusVariant {
 	return "warning";
 }

+// Mobile card fields (spec R3.2): job_id is primary; status/duration/size/
+// started give the at-a-glance info. See OpenSpec change `mobile-responsive-parity`.
+const runCardFields: MobileCardField<BackupRun>[] = [
+	{ key: "job", label: "Job", render: (r) => r.job_id, primary: true },
+	{
+		key: "status",
+		label: "Status",
+		render: (r) => <Badge variant={statusVariant(r.status)}>{r.status}</Badge>,
+	},
+	{
+		key: "duration",
+		label: "Duration",
+		render: (r) => formatDuration(r.duration_ms),
+	},
+	{
+		key: "size",
+		label: "Size",
+		render: (r) => formatBytes(r.bytes_transferred),
+	},
+	{
+		key: "started",
+		label: "Started",
+		render: (r) => formatTimestamp(r.started_at),
+	},
+];
+
 export default function BackupRunsTable({ runs }: Props) {
 	const [statusFilter, setStatusFilter] = useState<string>("all");
+	const isMobile = useIsMobile();

 	const filteredRuns =
 		statusFilter === "all"
@@ -77,34 +109,42 @@ export default function BackupRunsTable({ runs }: Props) {
 				</SelectContent>
 			</Select>

-			<div className="overflow-hidden rounded-lg border border-border">
-				<Table aria-label="Backup runs">
-					<TableHeader>
-						<TableRow className="bg-card hover:bg-card">
-							<TableHead>Job</TableHead>
-							<TableHead>Status</TableHead>
-							<TableHead>Duration</TableHead>
-							<TableHead>Size</TableHead>
-							<TableHead>Started</TableHead>
-						</TableRow>
-					</TableHeader>
-					<TableBody>
-						{filteredRuns.map((run) => (
-							<TableRow key={run.id}>
-								<TableCell>{run.job_id}</TableCell>
-								<TableCell>
-									<Badge variant={statusVariant(run.status)}>
-										{run.status}
-									</Badge>
-								</TableCell>
-								<TableCell>{formatDuration(run.duration_ms)}</TableCell>
-								<TableCell>{formatBytes(run.bytes_transferred)}</TableCell>
-								<TableCell>{formatTimestamp(run.started_at)}</TableCell>
+			{isMobile ? (
+				<MobileCardRow
+					rows={filteredRuns}
+					fields={runCardFields}
+					getRowId={(r) => r.id}
+				/>
+			) : (
+				<div className="overflow-hidden rounded-lg border border-border">
+					<Table aria-label="Backup runs">
+						<TableHeader>
+							<TableRow className="bg-card hover:bg-card">
+								<TableHead>Job</TableHead>
+								<TableHead>Status</TableHead>
+								<TableHead>Duration</TableHead>
+								<TableHead>Size</TableHead>
+								<TableHead>Started</TableHead>
 							</TableRow>
-						))}
-					</TableBody>
-				</Table>
-			</div>
+						</TableHeader>
+						<TableBody>
+							{filteredRuns.map((run) => (
+								<TableRow key={run.id}>
+									<TableCell>{run.job_id}</TableCell>
+									<TableCell>
+										<Badge variant={statusVariant(run.status)}>
+											{run.status}
+										</Badge>
+									</TableCell>
+									<TableCell>{formatDuration(run.duration_ms)}</TableCell>
+									<TableCell>{formatBytes(run.bytes_transferred)}</TableCell>
+									<TableCell>{formatTimestamp(run.started_at)}</TableCell>
+								</TableRow>
+							))}
+						</TableBody>
+					</Table>
+				</div>
+			)}
 		</div>
 	);
 }
@@ -4,26 +4,48 @@ import { Button } from "@/components/ui/button";
 interface HoverEditButtonProps {
 	onClick: () => void;
 	label?: string;
+	/** Controls visibility below the `md:` (768px) breakpoint.
+	 *
+	 * - `always` (default): the button is always visible on mobile/touch.
+	 * - `hover`: keep the legacy opacity-0-everywhere behavior.
+	 *
+	 * At `md:` and above the hover-reveal aesthetic is always preserved
+	 * (`md:opacity-0 md:group-hover:opacity-100`), so desktop is not regressed.
+	 * See OpenSpec change `mobile-responsive-parity`, spec R5. */
+	mobile?: "always" | "hover";
 }

 /**
- * Hover-to-reveal edit affordance.
+ * Hover-to-reveal edit affordance (desktop) / always-visible (mobile).
 *
- * Keeps the `rail-edit` class plus the opacity-0 base + transition so the
+ * Keeps the `rail-edit` class plus the opacity base + transition so the
 * existing hover-reveal rules in consuming pages (Actions, Settings) still
 * target it (`&:hover .rail-edit { opacity: 1 }`) until those pages migrate.
- * MUI IconButton + EditOutlined → shadcn `Button variant="ghost" size="icon-sm"`
- * + lucide `Pencil`. Same exported props/display name.
+ *
+ * Mobile behavior (`mobile="always"`, the default): the button is visible by
+ * default below `md` because hover does not fire on touch. The hover-reveal
+ * aesthetic is layered back on at `md:` and above via `md:opacity-0
+ * md:group-hover:opacity-100`. MUI IconButton + EditOutlined → shadcn `Button
+ * variant="ghost" size="icon-sm"` + lucide `Pencil`. Same exported props/display
+ * name. See OpenSpec change `mobile-responsive-parity`, spec R5.
 */
 export function HoverEditButton({
 	onClick,
 	label = "Edit",
+	mobile = "always",
 }: HoverEditButtonProps) {
+	// Legacy mode: opacity-0 everywhere, revealed by group hover (the consuming
+	// row supplies `group`).
+	const hoverClasses =
+		mobile === "hover"
+			? "opacity-0 transition-opacity duration-100 ease-out group-hover:opacity-100"
+			: "md:opacity-0 md:transition-opacity md:duration-100 md:ease-out md:group-hover:opacity-100";
+
 	return (
 		<Button
 			variant="ghost"
 			size="icon-sm"
-			className="rail-edit text-muted-foreground opacity-0 transition-opacity duration-100 ease-out"
+			className={`rail-edit text-muted-foreground mobile-touch-target ${hoverClasses}`}
 			aria-label={label}
 			onMouseDown={(e) => e.stopPropagation()}
 			onClick={(e) => {
@@ -1,4 +1,4 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import BackupAlertsTable from "../BackupAlertsTable";
@@ -61,3 +61,46 @@ describe("BackupAlertsTable", () => {
 		expect(screen.queryByRole("button", { name: "Acknowledge" })).toBeNull();
 	});
 });
+
+// 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("BackupAlertsTable (mobile card layout — slice 5)", () => {
+	it("renders cards with message as primary below md", () => {
+		setMatchMedia(true);
+		render(
+			<BackupAlertsTable
+				alerts={[alert({ id: "m1", message: "Disk full" })]}
+				onAcknowledge={vi.fn()}
+			/>,
+		);
+		expect(screen.getByText("Disk full")).toBeInTheDocument();
+		expect(screen.getAllByText("Severity")).toHaveLength(1);
+	});
+
+	it("renders acknowledge action on card below md", async () => {
+		setMatchMedia(true);
+		const onAck = vi.fn();
+		render(
+			<BackupAlertsTable
+				alerts={[alert({ id: "a1", acknowledged: false })]}
+				onAcknowledge={onAck}
+			/>,
+		);
+		await userEvent.click(screen.getByRole("button", { name: "Ack" }));
+		expect(onAck).toHaveBeenCalledWith("a1");
+	});
+});
@@ -0,0 +1,79 @@
+import { describe, it, expect, beforeEach } from "vitest";
+import { render, screen } from "@testing-library/react";
+import BackupJobsTable from "../BackupJobsTable";
+import type { BackupJob, BackupRun } from "../../types/backups";
+
+function job(overrides: Partial<BackupJob> = {}): BackupJob {
+	return {
+		id: "j1",
+		name: "nightly",
+		source: "/data",
+		target: "s3://bucket",
+		schedule_interval_seconds: 86400,
+		created_at: 1_700_000_000,
+		...overrides,
+	};
+}
+
+function run(overrides: Partial<BackupRun> = {}): BackupRun {
+	return {
+		id: "r1",
+		job_id: "j1",
+		started_at: 1_700_000_000,
+		ended_at: null,
+		status: "success",
+		bytes_transferred: 2048,
+		duration_ms: 1500,
+		error_message: null,
+		details_json: null,
+		created_at: 1_700_000_000,
+		...overrides,
+	};
+}
+
+// jsdom lacks matchMedia; default to desktop so the table renders.
+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("BackupJobsTable (desktop)", () => {
+	it("renders job name and schedule interval", () => {
+		render(
+			<BackupJobsTable
+				jobs={[job({ name: "nightly", schedule_interval_seconds: 86400 })]}
+				latestRuns={new Map()}
+			/>,
+		);
+		expect(screen.getByText("nightly")).toBeInTheDocument();
+		expect(screen.getByText("1d")).toBeInTheDocument();
+	});
+});
+
+describe("BackupJobsTable (mobile card layout — slice 5)", () => {
+	it("renders cards with job name as primary below md", () => {
+		setMatchMedia(true);
+		render(
+			<BackupJobsTable
+				jobs={[job({ id: "j1", name: "nightly", source: "/data" })]}
+				latestRuns={
+					new Map([["j1", run({ status: "success" })]]) as Map<string, BackupRun>
+				}
+			/>,
+		);
+		expect(screen.getByText("nightly")).toBeInTheDocument();
+		expect(screen.getAllByText("Source")).toHaveLength(1);
+		expect(screen.getAllByText("Schedule")).toHaveLength(1);
+		expect(screen.getAllByText("Last status")).toHaveLength(1);
+	});
+});
@@ -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);
+	});
+});
@@ -18,4 +18,23 @@ describe("HoverEditButton", () => {
 			screen.getByRole("button", { name: "Rename machine" }),
 		).toBeInTheDocument();
 	});
+
+	it('defaults to always-visible below md (mobile="always")', () => {
+		render(<HoverEditButton onClick={() => {}} />);
+		const button = screen.getByRole("button", { name: "Edit" });
+		const tokens = button.className.split(/\s+/);
+		// The default mobile mode layers hover-reveal only at md+ via
+		// md:opacity-0/md:group-hover:opacity-100, so the button is visible by
+		// default below md (no base opacity-0 token).
+		expect(tokens).toContain("md:opacity-0");
+		expect(tokens).toContain("md:group-hover:opacity-100");
+		expect(tokens).not.toContain("opacity-0");
+	});
+
+	it('preserves the legacy opacity-0 behavior when mobile="hover"', () => {
+		render(<HoverEditButton onClick={() => {}} mobile="hover" />);
+		const button = screen.getByRole("button", { name: "Edit" });
+		expect(button.className).toContain("opacity-0");
+		expect(button.className).toContain("group-hover:opacity-100");
+	});
 });
@@ -0,0 +1,101 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { MobileCardRow, type MobileCardField } from "../mobile-card";
+
+interface Row {
+	id: string;
+	title: string;
+	size: string;
+	year: number;
+}
+
+const rows: Row[] = [
+	{ id: "a", title: "Movie A", size: "4.2GB", year: 2026 },
+	{ id: "b", title: "Movie B", size: "2.1GB", year: 2025 },
+];
+
+const fields: MobileCardField<Row>[] = [
+	{ key: "title", label: "Title", render: (r) => r.title, primary: true },
+	{ key: "size", label: "Size", render: (r) => r.size },
+	{ key: "year", label: "Year", render: (r) => r.year },
+];
+
+describe("MobileCardRow", () => {
+	it("renders the primary field as a title and the rest as key/value pairs", () => {
+		render(<MobileCardRow rows={rows} fields={fields} />);
+
+		// Primary title
+		expect(screen.getByText("Movie A")).toBeInTheDocument();
+		expect(screen.getByText("Movie B")).toBeInTheDocument();
+
+		// Field labels and values (appear once per row)
+		expect(screen.getAllByText("Size")).toHaveLength(2);
+		expect(screen.getAllByText("4.2GB")).toHaveLength(1);
+		expect(screen.getAllByText("Year")).toHaveLength(2);
+		expect(screen.getAllByText("2026")).toHaveLength(1);
+	});
+
+	it("fires onRowClick when the card is tapped", async () => {
+		const onRowClick = vi.fn();
+		render(
+			<MobileCardRow rows={rows} fields={fields} onRowClick={onRowClick} />,
+		);
+
+		await userEvent.click(screen.getByText("Movie A"));
+		expect(onRowClick).toHaveBeenCalledTimes(1);
+		expect(onRowClick).toHaveBeenCalledWith(rows[0]);
+	});
+
+	it("renders the actions slot per row", () => {
+		render(
+			<MobileCardRow
+				rows={rows}
+				fields={fields}
+				actions={(r) => (
+					<button type="button" onClick={() => undefined}>
+						edit-{r.id}
+					</button>
+				)}
+			/>,
+		);
+
+		expect(screen.getByText("edit-a")).toBeInTheDocument();
+		expect(screen.getByText("edit-b")).toBeInTheDocument();
+	});
+
+	it("renders a non-interactive card when onRowClick is absent", () => {
+		render(<MobileCardRow rows={rows} fields={fields} />);
+		// No buttons wrapping the cards.
+		expect(screen.queryAllByRole("button")).toHaveLength(0);
+		expect(screen.getByText("Movie A")).toBeInTheDocument();
+	});
+
+	it("renders nothing when rows is empty", () => {
+		const { container } = render(<MobileCardRow rows={[]} fields={fields} />);
+		const cards = container.querySelector(".flex.flex-col.gap-2");
+		expect(cards?.children).toHaveLength(0);
+		expect(screen.queryByText("Size")).not.toBeInTheDocument();
+	});
+
+	it("renders a card without a title when no primary field is set", () => {
+		const noPrimary: MobileCardField<Row>[] = fields.filter(
+			(f) => f.key !== "title",
+		);
+		render(<MobileCardRow rows={rows} fields={noPrimary} />);
+		// No title text rendered, but the key/value stack still is.
+		expect(screen.queryByText("Movie A")).not.toBeInTheDocument();
+		expect(screen.getAllByText("Size")).toHaveLength(2);
+	});
+
+	it("uses getRowId for stable keys and emits no duplicate-key warning", () => {
+		const errorSpy = vi.spyOn(console, "error").mockImplementation(() => {});
+		render(<MobileCardRow rows={rows} fields={fields} getRowId={(r) => r.id} />);
+		// No React duplicate-key warning should fire.
+		const duplicateKeyCalls = errorSpy.mock.calls.filter((args) =>
+			String(args[0] ?? "").includes("same key"),
+		);
+		expect(duplicateKeyCalls).toHaveLength(0);
+		errorSpy.mockRestore();
+	});
+});
@@ -0,0 +1,96 @@
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { SheetForm } from "../sheet-form";
+
+describe("SheetForm", () => {
+	it("renders the title and children", () => {
+		render(
+			<SheetForm
+				open
+				onOpenChange={() => {}}
+				title="Edit service"
+				onSave={() => {}}
+				onCancel={() => {}}
+			>
+				<input aria-label="Name" />
+			</SheetForm>,
+		);
+
+		expect(screen.getByText("Edit service")).toBeInTheDocument();
+		expect(screen.getByLabelText("Name")).toBeInTheDocument();
+	});
+
+	it("calls onSave when Save is clicked", async () => {
+		const onSave = vi.fn();
+		render(
+			<SheetForm
+				open
+				onOpenChange={() => {}}
+				title="Edit"
+				onSave={onSave}
+				onCancel={() => {}}
+			>
+				<div />
+			</SheetForm>,
+		);
+
+		await userEvent.click(screen.getByRole("button", { name: "Save" }));
+		expect(onSave).toHaveBeenCalledTimes(1);
+	});
+
+	it("calls onCancel when Cancel is clicked", async () => {
+		const onCancel = vi.fn();
+		render(
+			<SheetForm
+				open
+				onOpenChange={() => {}}
+				title="Edit"
+				onSave={() => {}}
+				onCancel={onCancel}
+			>
+				<div />
+			</SheetForm>,
+		);
+
+		await userEvent.click(screen.getByRole("button", { name: "Cancel" }));
+		expect(onCancel).toHaveBeenCalledTimes(1);
+	});
+
+	it("disables Save and shows a pending label when isPending", () => {
+		render(
+			<SheetForm
+				open
+				onOpenChange={() => {}}
+				title="Edit"
+				onSave={() => {}}
+				onCancel={() => {}}
+				isPending
+			>
+				<div />
+			</SheetForm>,
+		);
+
+		const saveButton = screen.getByRole("button", { name: /Saving/i });
+		expect(saveButton).toBeDisabled();
+		expect(screen.getByText("Saving…")).toBeInTheDocument();
+	});
+
+	it("calls onCancel when the close (X) button is clicked", async () => {
+		const onCancel = vi.fn();
+		render(
+			<SheetForm
+				open
+				onOpenChange={() => {}}
+				title="Edit"
+				onSave={() => {}}
+				onCancel={onCancel}
+			>
+				<div />
+			</SheetForm>,
+		);
+
+		await userEvent.click(screen.getByRole("button", { name: "Close" }));
+		expect(onCancel).toHaveBeenCalledTimes(1);
+	});
+});
@@ -0,0 +1,123 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+/**
+ * Field descriptor for a {@link MobileCardRow}.
+ *
+ * The consuming page decides which fields to show and in what order; this
+ * primitive does not pick them. Exactly one field should set `primary: true` —
+ * it renders as the card title (bold, larger). The rest render as a key/value
+ * stack below the title.
+ */
+export interface MobileCardField<T> {
+	key: string;
+	label: string;
+	render: (row: T) => React.ReactNode;
+	/** When true, render as the card title (bold, larger). One per card. */
+	primary?: boolean;
+}
+
+export interface MobileCardRowProps<T> {
+	rows: T[];
+	fields: MobileCardField<T>[];
+	/** Stable per-row identity; falls back to the row index when omitted. */
+	getRowId?: (row: T) => string;
+	/** When set, the whole card becomes a button (44px min height). */
+	onRowClick?: (row: T) => void;
+	/** Optional right-aligned action slot (edit/delete icon buttons). */
+	actions?: (row: T) => React.ReactNode;
+	/** Optional className for the outer list container. */
+	className?: string;
+}
+
+/**
+ * Stacked card list for wide tables below the `md:` breakpoint.
+ *
+ * Each row renders as a card: the `primary` field as the title and the
+ * remaining fields as a key/value stack. When `onRowClick` is provided the
+ * whole card is a button with a 44px minimum touch target (spec R6.1). An
+ * optional `actions` slot renders right-aligned controls.
+ *
+ * This is the mobile counterpart to {@link DataTable}; pages branch on
+ * `useIsMobile()`. See OpenSpec change `mobile-responsive-parity`, design
+ * §`MobileCardRow`.
+ */
+export function MobileCardRow<T>({
+	rows,
+	fields,
+	getRowId,
+	onRowClick,
+	actions,
+	className,
+}: MobileCardRowProps<T>) {
+		const primary = fields.find((f) => f.primary);
+		const rest = fields.filter((f) => !f.primary);
+
+		return (
+			<div className={cn("flex flex-col gap-2", className)}>
+				{rows.map((row, index) => {
+					const rowKey = getRowId?.(row) ?? String(index);
+					const body = (
+					<div className="flex items-start justify-between gap-3">
+						<div className="flex min-w-0 flex-col gap-1">
+							{primary ? (
+								<div className="truncate text-sm font-medium text-foreground">
+									{primary.render(row)}
+								</div>
+							) : null}
+							{rest.length > 0 ? (
+								<dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-xs text-muted-foreground">
+									{rest.map((field) => (
+										<React.Fragment key={field.key}>
+											<dt className="font-medium text-muted-foreground">
+												{field.label}
+											</dt>
+											<dd className="truncate text-foreground">
+												{field.render(row)}
+											</dd>
+										</React.Fragment>
+									))}
+								</dl>
+							) : null}
+						</div>
+						{actions ? (
+							<div className="flex shrink-0 items-center gap-1">
+								{actions(row)}
+							</div>
+						) : null}
+					</div>
+				);
+
+				if (onRowClick) {
+					return (
+						<div
+							key={rowKey}
+							role="button"
+							tabIndex={0}
+							onClick={() => onRowClick(row)}
+							onKeyDown={(e) => {
+								if (e.key === "Enter" || e.key === " ") {
+									e.preventDefault();
+									onRowClick(row);
+								}
+							}}
+							className="mobile-touch-target min-h-11 w-full cursor-pointer rounded-lg border border-border bg-card p-3 text-left transition-colors hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+						>
+							{body}
+						</div>
+					);
+				}
+
+				return (
+					<div
+						key={rowKey}
+						className="min-h-11 rounded-lg border border-border bg-card p-3"
+					>
+						{body}
+					</div>
+				);
+			})}
+		</div>
+	);
+}
@@ -0,0 +1,92 @@
+import * as React from "react";
+import { Loader2, XIcon } from "lucide-react";
+
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Sheet, SheetContent, SheetTitle } from "@/components/ui/sheet";
+
+export interface SheetFormProps {
+	open: boolean;
+	onOpenChange: (open: boolean) => void;
+	title: string;
+	onSave: () => void;
+	onCancel: () => void;
+	/** Disable Save and show a pending spinner. */
+	isPending?: boolean;
+	/** Override the Save button label (default "Save"). */
+	saveLabel?: string;
+	children: React.ReactNode;
+	/** Optional className applied to the scrolling body. */
+	bodyClassName?: string;
+}
+
+/**
+ * Full-height form host for the mobile (`< md`) breakpoint.
+ *
+ * Wraps the shadcn `Sheet` primitive with a fixed header (title + close) and a
+ * fixed footer (Cancel + Save). The body scrolls between them. Laid out as a
+ * flex column (NOT `position: sticky`) because Radix `Sheet` uses transforms,
+ * which break sticky positioning — see OpenSpec change
+ * `mobile-responsive-parity`, design §`SheetForm` / risks.
+ *
+ * Uses `h-[100dvh]` (not `h-screen`) to avoid the iOS Safari URL-bar resize
+ * jump. Consumers choose this host vs the desktop `Dialog` via `useIsMobile()`.
+ */
+export function SheetForm({
+	open,
+	onOpenChange,
+	title,
+	onSave,
+	onCancel,
+	isPending = false,
+	saveLabel = "Save",
+	children,
+	bodyClassName,
+}: SheetFormProps) {
+	return (
+		<Sheet open={open} onOpenChange={onOpenChange}>
+			<SheetContent
+				side="bottom"
+				showCloseButton={false}
+				className="flex h-[100dvh] w-full flex-col gap-0 p-0 sm:max-w-full"
+			>
+				{/* Header — fixed at top */}
+				<div className="flex h-14 shrink-0 items-center justify-between border-b border-border px-4">
+					<SheetTitle className="font-heading text-base font-medium">
+						{title}
+					</SheetTitle>
+					<Button
+						variant="ghost"
+						size="icon-sm"
+						aria-label="Close"
+						onClick={onCancel}
+					>
+						<XIcon />
+					</Button>
+				</div>
+
+				{/* Body — scrolls */}
+				<div className={cn("flex-1 overflow-y-auto p-4", bodyClassName)}>
+					{children}
+				</div>
+
+				{/* Footer — fixed at bottom */}
+				<div className="flex shrink-0 items-center justify-end gap-2 border-t border-border bg-muted/50 p-4">
+					<Button variant="outline" onClick={onCancel} disabled={isPending}>
+						Cancel
+					</Button>
+					<Button onClick={onSave} disabled={isPending}>
+						{isPending ? (
+							<>
+								<Loader2 className="animate-spin" />
+								Saving…
+							</>
+						) : (
+							saveLabel
+						)}
+					</Button>
+				</div>
+			</SheetContent>
+		</Sheet>
+	);
+}
@@ -0,0 +1,38 @@
+import { useEffect, useState } from "react";
+
+/** Mobile breakpoint (must match Tailwind `md:` and the OpenSpec spec R1.2). */
+const MOBILE_QUERY = "(max-width: 768px)";
+
+/**
+ * Single source of truth for the mobile/desktop responsive cut.
+ *
+ * Returns `true` when the viewport matches `max-width: 768px` (phone portrait),
+ * `false` at `md:` and above. SSR-safe: returns `false` when `window` is
+ * undefined so server-rendered markup stays on the desktop path.
+ *
+ * Replaces the ad-hoc `window.matchMedia("(max-width: 768px)")` reads scattered
+ * across pages (App.tsx, Media.tsx) — see OpenSpec change
+ * `mobile-responsive-parity`, design §`useIsMobile`.
+ */
+export function useIsMobile(): boolean {
+	const [isMobile, setIsMobile] = useState(
+		() =>
+			typeof window !== "undefined" &&
+			typeof window.matchMedia === "function" &&
+			window.matchMedia(MOBILE_QUERY).matches,
+	);
+
+	useEffect(() => {
+		if (
+			typeof window === "undefined" ||
+			typeof window.matchMedia !== "function"
+		)
+			return;
+		const mql = window.matchMedia(MOBILE_QUERY);
+		const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+		mql.addEventListener("change", handler);
+		return () => mql.removeEventListener("change", handler);
+	}, []);
+
+	return isMobile;
+}
@@ -100,3 +100,19 @@ body,
 * {
 	box-sizing: border-box;
 }
+
+/*
+ * Mobile touch-target utility (spec R6.1).
+ *
+ * Applies a 44x44px minimum hit area to interactive elements ONLY below the
+ * `md:` (768px) breakpoint, satisfying WCAG 2.5.5 / Apple HIG on touch devices.
+ * At md+ the class is inert so desktop sizing is not regressed. Pages sprinkle
+ * this on icon buttons, checkboxes, switches, and row taps. See OpenSpec
+ * change `mobile-responsive-parity`, design §`mobile-touch-target`.
+ */
+@media (max-width: 767px) {
+	.mobile-touch-target {
+		min-height: 44px;
+		min-width: 44px;
+	}
+}
@@ -1,5 +1,11 @@
 import { useMemo, useState } from "react";
 import { useNavigate } from "react-router-dom";
+import {
+	Activity,
+	DatabaseBackup,
+	LayoutDashboard,
+	Monitor,
+} from "lucide-react";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -26,13 +32,122 @@ import {
 	useSaveDashboardShortcut,
 } from "../hooks/useDashboard";
 import { useWidgetInstances } from "../hooks/useWidgets";
-import type { DashboardShortcut, DashboardShortcutInput } from "../types";
+import { useServiceInstances } from "../hooks/useServices";
+import { useIsMobile } from "../hooks/useIsMobile";
+import type {
+	DashboardShortcut,
+	DashboardShortcutInput,
+	ServiceInstance,
+	WidgetInstance,
+} from "../types";
 import { SectionCard } from "../components/SectionCard";
 import { ConfirmDialog } from "../components/ConfirmDialog";
 import { DialogFooter } from "../components/DialogFooter";
 import { WidgetInstanceCard } from "../components/WidgetInstance";
 import { WidgetConfigDialog } from "../components/WidgetConfigDialog";

+// --- Mobile section grouping (spec R7.2) ---
+
+const SECTION_ORDER = ["observability", "media", "backups", "custom"] as const;
+type SectionId = (typeof SECTION_ORDER)[number];
+
+const SECTION_META: Record<
+	SectionId,
+	{ label: string; icon: typeof Activity }
+> = {
+	observability: { label: "Observability", icon: Activity },
+	media: { label: "Media", icon: Monitor },
+	backups: { label: "Backups", icon: DatabaseBackup },
+	custom: { label: "Custom", icon: LayoutDashboard },
+};
+
+const OBSERVABILITY_TYPES = new Set(["alertmanager", "prometheus", "grafana"]);
+
+function widgetSection(
+	widget: WidgetInstance,
+	services: ServiceInstance[],
+): SectionId {
+	if (!widget.service_id) {
+		return widget.widget_kind === "backups" ? "backups" : "custom";
+	}
+	const service = services.find((s) => s.id === widget.service_id);
+	const serviceType = service?.service_type ?? "";
+	if (OBSERVABILITY_TYPES.has(serviceType)) return "observability";
+	if (serviceType === "jellyfin") return "media";
+	return "custom";
+}
+
+function groupWidgetsBySection(
+	widgets: WidgetInstance[],
+	services: ServiceInstance[],
+): { id: SectionId; widgets: WidgetInstance[] }[] {
+	const groups: Record<SectionId, WidgetInstance[]> = {
+		observability: [],
+		media: [],
+		backups: [],
+		custom: [],
+	};
+	for (const w of widgets) {
+		groups[widgetSection(w, services)].push(w);
+	}
+	return SECTION_ORDER.map((id) => ({ id, widgets: groups[id] })).filter(
+		(s) => s.widgets.length > 0,
+	);
+}
+
+function MobileWidgetSections({
+	sections,
+}: {
+	sections: { id: SectionId; widgets: WidgetInstance[] }[];
+}) {
+	return (
+		<>
+			{/* Anchor bar — horizontally scrollable pills (spec R7.2, md:hidden) */}
+			<div className="-mx-1 flex gap-2 overflow-x-auto px-1 pb-1">
+				{sections.map((section) => {
+					const meta = SECTION_META[section.id];
+					const Icon = meta.icon;
+					return (
+						<button
+							key={section.id}
+							type="button"
+							className="mobile-touch-target inline-flex shrink-0 items-center gap-1.5 rounded-full border border-border bg-card px-3 py-1.5 text-xs font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+							onClick={() =>
+								document
+									.getElementById(`dashboard-section-${section.id}`)
+									?.scrollIntoView({
+										behavior: "smooth",
+										block: "start",
+									})
+							}
+						>
+							<Icon className="size-3.5" />
+							{meta.label}
+						</button>
+					);
+				})}
+			</div>
+			{/* Sectioned widgets — single column (spec R7.1) */}
+			<div className="grid grid-cols-1 gap-4">
+				{sections.map((section) => (
+					<section
+						key={section.id}
+						id={`dashboard-section-${section.id}`}
+						className="scroll-mt-16 flex flex-col gap-2"
+					>
+						<h3 className="text-sm font-semibold text-muted-foreground">
+							{SECTION_META[section.id].label}
+						</h3>
+						{section.widgets.map((widget) => (
+							<WidgetInstanceCard key={widget.id} widget={widget} />
+						))}
+					</section>
+				))}
+			</div>
+		</>
+	);
+}
+
 function emptyShortcut(): DashboardShortcutInput {
 	return {
 		id: null,
@@ -336,6 +451,8 @@ export function Dashboard() {
 	const [deleteShortcutId, setDeleteShortcutId] = useState<string | null>(null);
 	const [widgetDialogOpen, setWidgetDialogOpen] = useState(false);
 	const { data: widgetInstances = [] } = useWidgetInstances();
+	const { data: services = [] } = useServiceInstances();
+	const isMobile = useIsMobile();

 	const visibleWidgets = useMemo(
 		() =>
@@ -345,6 +462,11 @@ export function Dashboard() {
 		[widgetInstances],
 	);

+	const mobileSections = useMemo(
+		() => groupWidgetsBySection(visibleWidgets, services),
+		[visibleWidgets, services],
+	);
+
 	const openCreateShortcut = () => {
 		setShortcutDraft(emptyShortcut());
 		setShortcutDialogOpen(true);
@@ -417,9 +539,13 @@ export function Dashboard() {
 				)}
 			</SectionCard>

-			{visibleWidgets.map((widget) => (
-				<WidgetInstanceCard key={widget.id} widget={widget} />
-			))}
+			{isMobile && mobileSections.length > 0 ? (
+				<MobileWidgetSections sections={mobileSections} />
+			) : (
+				visibleWidgets.map((widget) => (
+					<WidgetInstanceCard key={widget.id} widget={widget} />
+				))
+			)}

 			<ShortcutDialog
 				open={shortcutDialogOpen}
@@ -3,6 +3,10 @@ import { useNavigate, useSearchParams } from "react-router-dom";
 import type { ColumnDef, RowSelectionState } from "@tanstack/react-table";

 import { DataTable } from "@/components/ui/data-table";
+import {
+	MobileCardRow,
+	type MobileCardField,
+} from "@/components/ui/mobile-card";
 import { Alert, AlertAction, AlertDescription } from "@/components/ui/alert";
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
@@ -24,6 +28,7 @@ import {
 	useRunJob,
 } from "../hooks/useFiles";
 import { usePersistentState } from "../hooks/usePersistentState";
+import { useIsMobile } from "../hooks/useIsMobile";
 import { useMonitoringSettings } from "../hooks/useSettings";
 import { SectionCard } from "../components/SectionCard";
 import { TabbedCard } from "../components/TabbedCard";
@@ -182,6 +187,18 @@ const fileColumns: ColumnDef<DisplayRow>[] = [
 	},
 ];

+// Mobile card fields (spec R3.2): the card picks the 3-5 most important fields.
+// Name is the primary identifier; type distinguishes dir/file/up at a glance;
+// size and modified give the at-a-glance info a user browsing files on a phone
+// needs. Ext is redundant with the name on mobile (the extension is visible in
+// the filename itself). See OpenSpec change `mobile-responsive-parity`.
+const fileCardFields: MobileCardField<DisplayRow>[] = [
+	{ key: "name", label: "Name", render: (r) => r.name, primary: true },
+	{ key: "type", label: "Type", render: (r) => r.type },
+	{ key: "size", label: "Size", render: (r) => r.size || "-" },
+	{ key: "modified", label: "Modified", render: (r) => r.modified || "-" },
+];
+
 const FILE_BROWSER_STATE_KEY = "manage.files.browserState";

 type FileBrowserState = {
@@ -501,6 +518,7 @@ function InfoAlert({ children }: { children: React.ReactNode }) {

 export function FileBrowser() {
 	const [searchParams, setSearchParams] = useSearchParams();
+	const isMobile = useIsMobile();
 	const [columnVisibility, setColumnVisibility] = useState<
 		Record<string, boolean>
 	>({});
@@ -725,23 +743,34 @@ export function FileBrowser() {
 									</Alert>
 								)}
 								<div className="rounded-lg border bg-card">
-									<DataTable
-										columns={fileColumns}
-										data={rows}
-										getRowId={(row) => row.id}
-										enableRowSelection
-										rowSelection={rowSelection}
-										onRowSelectionChange={handleSelectionChange}
-										onRowClick={handleRowClick}
-										enableColumnVisibilityToggle
-										columnVisibility={columnVisibility}
-										onColumnVisibilityChange={setColumnVisibility}
-										emptyMessage={
-											isLoading
-												? "Loading directory..."
-												: "This directory is empty."
-										}
-									/>
+									{isMobile ? (
+										<div className="p-4">
+											<MobileCardRow
+												rows={rows}
+												fields={fileCardFields}
+												getRowId={(row) => row.id}
+												onRowClick={handleRowClick}
+											/>
+										</div>
+									) : (
+										<DataTable
+											columns={fileColumns}
+											data={rows}
+											getRowId={(row) => row.id}
+											enableRowSelection
+											rowSelection={rowSelection}
+											onRowSelectionChange={handleSelectionChange}
+											onRowClick={handleRowClick}
+											enableColumnVisibilityToggle
+											columnVisibility={columnVisibility}
+											onColumnVisibilityChange={setColumnVisibility}
+											emptyMessage={
+												isLoading
+													? "Loading directory..."
+													: "This directory is empty."
+											}
+										/>
+									)}
 								</div>
 							</div>
 						</SectionCard>
@@ -9,6 +9,10 @@ import type {
 } from "@tanstack/react-table";

 import { DataTable } from "@/components/ui/data-table";
+import {
+	MobileCardRow,
+	type MobileCardField,
+} from "@/components/ui/mobile-card";
 import { Alert, AlertDescription } from "@/components/ui/alert";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
@@ -31,6 +35,7 @@ import {
 	useForceStopBuildIndex,
 } from "../hooks/useMedia";
 import { usePersistentState } from "../hooks/usePersistentState";
+import { useIsMobile } from "../hooks/useIsMobile";
 import type { MediaItem } from "../types";
 import { useServiceInstances } from "../hooks/useServices";
 import { useCounts, useLibraries } from "../hooks/useDashboard";
@@ -75,6 +80,116 @@ function getMediaRowId(row: MediaItem): string {
 	return row.path;
 }

+// Mobile card fields (spec R3.2): the card picks the 3-5 most important fields.
+// Title is the primary identifier; size/HDR/library/year give the at-a-glance
+// tech + context info a user scanning the library on a phone needs. Runtime,
+// bitrate, resolution, codec etc. live on the desktop table only.
+const mediaCardFields: MobileCardField<MediaItem>[] = [
+	{ key: "title", label: "Title", render: (r) => r.title, primary: true },
+	{ key: "size", label: "Size", render: (r) => r.size || "-" },
+	{
+		key: "hdr",
+		label: "HDR",
+		render: (r) => r.hdr || "-",
+	},
+	{ key: "library", label: "Library", render: (r) => r.library || "-" },
+	{
+		key: "year",
+		label: "Year",
+		render: (r) => (r.year != null ? String(r.year) : "-"),
+	},
+];
+
+// Standalone pagination for the mobile card layout. The DataTable renders its
+// own pagination internally; this mirrors that UI (rows count, page-size
+// select, page indicator, prev/next) but works off the raw pagination state
+// instead of a TanStack table instance. See spec R3.3.
+function MediaMobilePagination({
+	pageIndex,
+	pageSize,
+	pageSizeOptions,
+	totalRows,
+	pageCount,
+	onPaginationChange,
+}: {
+	pageIndex: number;
+	pageSize: number;
+	pageSizeOptions: number[];
+	totalRows: number;
+	pageCount: number;
+	onPaginationChange: OnChangeFn<PaginationState>;
+}) {
+	return (
+		<div className="flex flex-wrap items-center justify-between gap-3 p-4 text-sm">
+			<div className="text-muted-foreground">
+				{`${totalRows} row${totalRows === 1 ? "" : "s"}`}
+			</div>
+			<div className="flex items-center gap-3">
+				<div className="flex items-center gap-1.5">
+					<span className="text-muted-foreground">Rows per page</span>
+					<Select
+						value={String(pageSize)}
+						onValueChange={(value) =>
+							onPaginationChange(() => ({
+								pageIndex: 0,
+								pageSize: Number(value),
+							}))
+						}
+					>
+						<SelectTrigger
+							size="sm"
+							className="w-[70px]"
+							aria-label="Rows per page"
+						>
+							<SelectValue />
+						</SelectTrigger>
+						<SelectContent>
+							{pageSizeOptions.map((option) => (
+								<SelectItem key={option} value={String(option)}>
+									{option}
+								</SelectItem>
+							))}
+						</SelectContent>
+					</Select>
+				</div>
+				<span className="text-muted-foreground">
+					Page {pageIndex + 1} of {pageCount}
+				</span>
+				<div className="flex items-center gap-1">
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() =>
+							onPaginationChange((prev) => ({
+								...prev,
+								pageIndex: Math.max(0, prev.pageIndex - 1),
+							}))
+						}
+						disabled={pageIndex <= 0}
+						aria-label="Previous page"
+					>
+						Previous
+					</Button>
+					<Button
+						variant="outline"
+						size="sm"
+						onClick={() =>
+							onPaginationChange((prev) => ({
+								...prev,
+								pageIndex: prev.pageIndex + 1,
+							}))
+						}
+						disabled={pageIndex >= pageCount - 1}
+						aria-label="Next page"
+					>
+						Next
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+}
+
 const MEDIA_TAB_STATE_KEY = "manage.media.tabState";
 const SMALL_BREAKPOINT = "(max-width: 900px)";
 // Mirrors the pre-rework DataGrid `columnVisibilityModel` mobile override.
@@ -178,6 +293,7 @@ export function Media() {
 	const navigate = useNavigate();
 	const [searchParams, setSearchParams] = useSearchParams();
 	const isSmall = usePrefersSmallScreen();
+	const isMobile = useIsMobile();
 	const { data: jellyfinServices = [] } = useServiceInstances("jellyfin");
 	const selectedServiceId =
 		searchParams.get("jellyfin_service_id") ||
@@ -532,33 +648,55 @@ export function Media() {
 				</p>
 			)}

-			{status?.exists && (
-				<div className="rounded-lg border bg-card">
-					<DataTable
-						columns={mediaColumns}
-						data={queryResult?.items ?? []}
-						getRowId={getMediaRowId}
-						enableRowSelection
-						rowSelection={rowSelection}
-						onRowSelectionChange={setRowSelection}
-						onRowClick={handleRowClick}
-						enableColumnVisibilityToggle
-						columnVisibility={effectiveColumnVisibility}
-						onColumnVisibilityChange={handleColumnVisibilityChange}
-						enablePagination
-						manualPagination
-						pagination={pagination}
-						onPaginationChange={handlePaginationChange}
-						pageSizeOptions={[50, 100, 200]}
-						rowCount={total}
-						emptyMessage={
-							isLoading
-								? "Loading media..."
-								: "No media items match these filters."
-						}
-					/>
-				</div>
-			)}
+			{status?.exists &&
+				(isMobile ? (
+					<div className="rounded-lg border bg-card">
+						<div className="p-4">
+							<MobileCardRow
+								rows={queryResult?.items ?? []}
+								fields={mediaCardFields}
+								getRowId={getMediaRowId}
+								onRowClick={handleRowClick}
+							/>
+						</div>
+						{queryResult && (
+							<MediaMobilePagination
+								pageIndex={pageIndex}
+								pageSize={pageSize}
+								pageSizeOptions={[50, 100, 200]}
+								totalRows={total}
+								pageCount={totalPages}
+								onPaginationChange={handlePaginationChange}
+							/>
+						)}
+					</div>
+				) : (
+					<div className="rounded-lg border bg-card">
+						<DataTable
+							columns={mediaColumns}
+							data={queryResult?.items ?? []}
+							getRowId={getMediaRowId}
+							enableRowSelection
+							rowSelection={rowSelection}
+							onRowSelectionChange={setRowSelection}
+							onRowClick={handleRowClick}
+							enableColumnVisibilityToggle
+							columnVisibility={effectiveColumnVisibility}
+							onColumnVisibilityChange={handleColumnVisibilityChange}
+							enablePagination
+							manualPagination
+							pagination={pagination}
+							onPaginationChange={handlePaginationChange}
+							pageSizeOptions={[50, 100, 200]}
+							rowCount={total}
+							emptyMessage={
+								isLoading
+									? "Loading media..."
+									: "No media items match these filters."
+							}
+						/>
+					</div>
+				))}
 		</div>
 	);
 }
@@ -51,8 +51,13 @@ import {
 import { cn } from "@/lib/utils";
 import { MetricCard } from "../components/MetricCard";
 import { SessionActivityPanel } from "../components/SessionActivityPanel";
+import {
+	MobileCardRow,
+	type MobileCardField,
+} from "@/components/ui/mobile-card";
 import { useUsers } from "../hooks/useUsers";
 import { useActivity } from "../hooks/useDashboard";
+import { useIsMobile } from "../hooks/useIsMobile";
 import { useSendUserMessage } from "../hooks/useSendUserMessage";
 import { useUserMessageQueueStatus } from "../hooks/useUserMessageQueueStatus";
 import type { UserDirectoryItem } from "../types";
@@ -63,9 +68,9 @@ import {
 	type UserStateItem,
 } from "../userState";

-// Replaces MUI `useMediaQuery` (a 6b-owned component) with a dependency-free
-// matchMedia hook for the compose dialog's mobile fullScreen behavior.
-function useIsMobile(query = "(max-width: 900px)") {
+// Local breakpoint for the compose dialog (slice 6b uses 900px for fullScreen).
+// The shared `useIsMobile` from hooks/ (768px) drives the directory table branch.
+function useComposeViewport(query = "(max-width: 900px)") {
 	const [mobile, setMobile] = useState(() =>
 		typeof window !== "undefined" && typeof window.matchMedia === "function"
 			? window.matchMedia(query).matches
@@ -102,11 +107,35 @@ function activityBadgeVariant(

 const DEFAULT_HTML_BODY = "<p>Hello,</p><p> </p><p>Best,<br />Manage</p>";

+// Mobile card fields (spec R3.2): display name is primary; username, activity
+// badge, and email give the at-a-glance info for scanning users on a phone.
+// See OpenSpec change `mobile-responsive-parity`, tasks slice 5.1.
+const userCardFields: MobileCardField<UserStateItem>[] = [
+	{ key: "name", label: "Name", render: (r) => userLabel(r), primary: true },
+	{
+		key: "username",
+		label: "Username",
+		render: (r) =>
+			r.username && r.username !== r.display_name ? r.username : r.jellyfin_id,
+	},
+	{
+		key: "activity",
+		label: "Activity",
+		render: (r) => (
+			<Badge variant={activityBadgeVariant(r.activity_label)}>
+				{r.activity_label}
+			</Badge>
+		),
+	},
+	{ key: "email", label: "Email", render: (r) => r.email || "—" },
+];
+
 export function UsersPage() {
 	const { data, isError, error } = useUsers();
 	const { data: activity } = useActivity();
 	const queueStatusQuery = useUserMessageQueueStatus();
 	const sendUserMessage = useSendUserMessage();
+	const isComposeMobile = useComposeViewport();
 	const isMobile = useIsMobile();
 	const [search, setSearch] = useState("");
 	const [searchParams, setSearchParams] = useSearchParams();
@@ -479,154 +508,183 @@ export function UsersPage() {
 					</div>

 					<div className="max-h-[660px] overflow-auto rounded-lg border">
-						<Table aria-label="Users table">
-							<TableHeader>
-								<TableRow>
-									<TableHead className={cn(thBase, "w-14 p-2")}>
-										<Checkbox
-											checked={allVisibleSelected}
-											aria-label="Select all visible users"
-											onCheckedChange={(checked) =>
-												toggleVisibleSelection(checked === true)
-											}
-										/>
-									</TableHead>
-									<TableHead className={thBase}>User</TableHead>
-									<TableHead className={thBase}>Email</TableHead>
-									<TableHead className={cn(thBase, "w-[132px] text-center")}>
-										Activity
-									</TableHead>
-									<TableHead
-										className={cn(
-											thBase,
-											"hidden w-[140px] text-center md:table-cell",
-										)}
-									>
-										Type
-									</TableHead>
-									<TableHead className={cn(thBase, "w-[132px] text-center")}>
-										Jellyseerr
-									</TableHead>
-									<TableHead
-										className={cn(
-											thBase,
-											"hidden w-[120px] text-center md:table-cell",
-										)}
-									>
-										Role
-									</TableHead>
-									<TableHead className={thBase}>Permissions</TableHead>
-									<TableHead
-										className={cn(
-											thBase,
-											"hidden w-24 text-center md:table-cell",
-										)}
-									>
-										Reqs
-									</TableHead>
-									<TableHead
-										className={cn(
-											thBase,
-											"hidden w-[120px] text-center md:table-cell",
-										)}
-									>
-										Contact
-									</TableHead>
-								</TableRow>
-							</TableHeader>
-							<TableBody>
-								{filteredRows.map((row) => {
-									const linked =
-										row.jellyseerr_user_id !== null &&
-										row.jellyseerr_user_id !== undefined;
-									const checked = selectedIdSet.has(row.jellyfin_id);
-									return (
-										<TableRow
-											key={row.jellyfin_id}
-											data-state={
-												checked || selectedUser?.jellyfin_id === row.jellyfin_id
-													? "selected"
-													: undefined
-											}
-											className="cursor-pointer"
-											onClick={() => setSearchParams({ user: row.jellyfin_id })}
+						{isMobile ? (
+							<div className="p-3">
+								<MobileCardRow
+									rows={filteredRows}
+									fields={userCardFields}
+									getRowId={(r) => r.jellyfin_id}
+									onRowClick={(r) => setSearchParams({ user: r.jellyfin_id })}
+									actions={(r) => {
+										const checked = selectedIdSet.has(r.jellyfin_id);
+										return (
+											<Checkbox
+												checked={checked}
+												aria-label={`Select ${userLabel(r)}`}
+												className="mobile-touch-target"
+												onClick={(e) => e.stopPropagation()}
+												onCheckedChange={() =>
+													toggleUserSelected(r.jellyfin_id)
+												}
+											/>
+										);
+									}}
+								/>
+							</div>
+						) : (
+							<Table aria-label="Users table">
+								<TableHeader>
+									<TableRow>
+										<TableHead className={cn(thBase, "w-14 p-2")}>
+											<Checkbox
+												checked={allVisibleSelected}
+												aria-label="Select all visible users"
+												onCheckedChange={(checked) =>
+													toggleVisibleSelection(checked === true)
+												}
+											/>
+										</TableHead>
+										<TableHead className={thBase}>User</TableHead>
+										<TableHead className={thBase}>Email</TableHead>
+										<TableHead className={cn(thBase, "w-[132px] text-center")}>
+											Activity
+										</TableHead>
+										<TableHead
+											className={cn(
+												thBase,
+												"hidden w-[140px] text-center md:table-cell",
+											)}
 										>
-											<TableCell className="w-14 p-2">
-												<Checkbox
-													checked={checked}
-													aria-label={`Select ${userLabel(row)}`}
-													onClick={(event) => event.stopPropagation()}
-													onCheckedChange={() =>
-														toggleUserSelected(row.jellyfin_id)
-													}
-												/>
-											</TableCell>
-											<TableCell>
-												<div className="flex items-center gap-3 min-w-0">
-													<Avatar className="size-9">
-														<AvatarImage
-															src={row.avatar || undefined}
-															alt={userLabel(row)}
-														/>
-														<AvatarFallback>
-															{userLabel(row).charAt(0).toUpperCase()}
-														</AvatarFallback>
-													</Avatar>
-													<div className="min-w-0">
-														<div className="truncate font-semibold leading-tight">
-															{userLabel(row)}
-														</div>
-														<div className="truncate text-xs text-muted-foreground">
-															{row.username && row.username !== row.display_name
-																? row.username
-																: row.jellyfin_id}
+											Type
+										</TableHead>
+										<TableHead className={cn(thBase, "w-[132px] text-center")}>
+											Jellyseerr
+										</TableHead>
+										<TableHead
+											className={cn(
+												thBase,
+												"hidden w-[120px] text-center md:table-cell",
+											)}
+										>
+											Role
+										</TableHead>
+										<TableHead className={thBase}>Permissions</TableHead>
+										<TableHead
+											className={cn(
+												thBase,
+												"hidden w-24 text-center md:table-cell",
+											)}
+										>
+											Reqs
+										</TableHead>
+										<TableHead
+											className={cn(
+												thBase,
+												"hidden w-[120px] text-center md:table-cell",
+											)}
+										>
+											Contact
+										</TableHead>
+									</TableRow>
+								</TableHeader>
+								<TableBody>
+									{filteredRows.map((row) => {
+										const linked =
+											row.jellyseerr_user_id !== null &&
+											row.jellyseerr_user_id !== undefined;
+										const checked = selectedIdSet.has(row.jellyfin_id);
+										return (
+											<TableRow
+												key={row.jellyfin_id}
+												data-state={
+													checked ||
+													selectedUser?.jellyfin_id === row.jellyfin_id
+														? "selected"
+														: undefined
+												}
+												className="cursor-pointer"
+												onClick={() =>
+													setSearchParams({ user: row.jellyfin_id })
+												}
+											>
+												<TableCell className="w-14 p-2">
+													<Checkbox
+														checked={checked}
+														aria-label={`Select ${userLabel(row)}`}
+														onClick={(event) => event.stopPropagation()}
+														onCheckedChange={() =>
+															toggleUserSelected(row.jellyfin_id)
+														}
+													/>
+												</TableCell>
+												<TableCell>
+													<div className="flex items-center gap-3 min-w-0">
+														<Avatar className="size-9">
+															<AvatarImage
+																src={row.avatar || undefined}
+																alt={userLabel(row)}
+															/>
+															<AvatarFallback>
+																{userLabel(row).charAt(0).toUpperCase()}
+															</AvatarFallback>
+														</Avatar>
+														<div className="min-w-0">
+															<div className="truncate font-semibold leading-tight">
+																{userLabel(row)}
+															</div>
+															<div className="truncate text-xs text-muted-foreground">
+																{row.username &&
+																row.username !== row.display_name
+																	? row.username
+																	: row.jellyfin_id}
+															</div>
 														</div>
 													</div>
-												</div>
-											</TableCell>
-											<TableCell>
-												<div className="truncate font-medium">
-													{row.email || "—"}
-												</div>
-											</TableCell>
-											<TableCell className="text-center">
-												<Badge
-													variant={activityBadgeVariant(row.activity_label)}
-												>
-													{row.activity_label}
-												</Badge>
-											</TableCell>
-											<TableCell className="hidden text-center md:table-cell">
-												<Badge variant="outline">{row.user_type_label}</Badge>
-											</TableCell>
-											<TableCell className="text-center">
-												<Badge variant={linked ? "success" : "secondary"}>
-													{linked
-														? `Linked #${row.jellyseerr_user_id}`
-														: "Base only"}
-												</Badge>
-											</TableCell>
-											<TableCell className="hidden text-center md:table-cell">
-												<Badge variant="outline">{row.role}</Badge>
-											</TableCell>
-											<TableCell className="whitespace-normal">
-												{row.permissions_label}
-											</TableCell>
-											<TableCell className="hidden text-center font-semibold md:table-cell">
-												{row.request_count ?? "—"}
-											</TableCell>
-											<TableCell className="hidden text-center md:table-cell">
-												<Badge
-													variant={row.contactable ? "success" : "secondary"}
-												>
-													{row.contactable ? "Yes" : "No"}
-												</Badge>
-											</TableCell>
-										</TableRow>
-									);
-								})}
-							</TableBody>
-						</Table>
+												</TableCell>
+												<TableCell>
+													<div className="truncate font-medium">
+														{row.email || "—"}
+													</div>
+												</TableCell>
+												<TableCell className="text-center">
+													<Badge
+														variant={activityBadgeVariant(row.activity_label)}
+													>
+														{row.activity_label}
+													</Badge>
+												</TableCell>
+												<TableCell className="hidden text-center md:table-cell">
+													<Badge variant="outline">{row.user_type_label}</Badge>
+												</TableCell>
+												<TableCell className="text-center">
+													<Badge variant={linked ? "success" : "secondary"}>
+														{linked
+															? `Linked #${row.jellyseerr_user_id}`
+															: "Base only"}
+													</Badge>
+												</TableCell>
+												<TableCell className="hidden text-center md:table-cell">
+													<Badge variant="outline">{row.role}</Badge>
+												</TableCell>
+												<TableCell className="whitespace-normal">
+													{row.permissions_label}
+												</TableCell>
+												<TableCell className="hidden text-center font-semibold md:table-cell">
+													{row.request_count ?? "—"}
+												</TableCell>
+												<TableCell className="hidden text-center md:table-cell">
+													<Badge
+														variant={row.contactable ? "success" : "secondary"}
+													>
+														{row.contactable ? "Yes" : "No"}
+													</Badge>
+												</TableCell>
+											</TableRow>
+										);
+									})}
+								</TableBody>
+							</Table>
+						)}
 					</div>
 				</div>
 			</div>
@@ -766,7 +824,7 @@ export function UsersPage() {
 				<DialogContent
 					className={cn(
 						"flex max-h-[90dvh] flex-col gap-0 overflow-hidden p-0 sm:max-w-2xl",
-						isMobile &&
+						isComposeMobile &&
 							"inset-0 max-h-none max-w-none translate-x-0 translate-y-0 rounded-none",
 					)}
 				>
@@ -2,12 +2,18 @@ import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { Dashboard } from "../Dashboard";
-import type { DashboardShortcut } from "../../types";
+import type {
+	DashboardShortcut,
+	ServiceInstance,
+	WidgetInstance,
+} from "../../types";

 // Stub the composed widgets so the test exercises Dashboard's own behavior
 // (shortcut CRUD) without rendering widgets or their data queries.
 vi.mock("../../components/WidgetInstance", () => ({
-	WidgetInstanceCard: () => <div data-testid="widget-stub" />,
+	WidgetInstanceCard: ({ widget }: { widget: { title: string } }) => (
+		<div data-testid="widget-stub">{widget.title}</div>
+	),
 }));
 vi.mock("../../components/WidgetConfigDialog", () => ({
 	WidgetConfigDialog: () => <div data-testid="widget-config-stub" />,
@@ -21,8 +27,15 @@ vi.mock("react-router-dom", () => ({
 vi.mock("../../hooks/useSettings", () => ({
 	useMonitoringSettings: () => ({ data: [] }),
 }));
+
+// --- Dynamic mock state (reset in beforeEach) ---
+let widgetInstances: WidgetInstance[] = [];
+let serviceInstances: ServiceInstance[] = [];
 vi.mock("../../hooks/useWidgets", () => ({
-	useWidgetInstances: () => ({ data: [] }),
+	useWidgetInstances: () => ({ data: widgetInstances }),
+}));
+vi.mock("../../hooks/useServices", () => ({
+	useServiceInstances: () => ({ data: serviceInstances }),
 }));

 const saveShortcutMutate = vi.fn().mockResolvedValue({});
@@ -62,8 +75,26 @@ beforeEach(() => {
 	saveShortcutMutate.mockClear();
 	deleteShortcutMutate.mockClear();
 	shortcuts = [];
+	widgetInstances = [];
+	serviceInstances = [];
+	setMatchMedia(false); // desktop by default
 });

+// --- matchMedia mock for useIsMobile (jsdom has no native matchMedia) ---
+
+function setMatchMedia(matches: boolean) {
+	window.matchMedia = ((query: string) => ({
+		matches: query === "(max-width: 768px)" ? matches : false,
+		media: query,
+		onchange: null,
+		addEventListener: () => {},
+		removeEventListener: () => {},
+		addListener: () => {},
+		removeListener: () => {},
+		dispatchEvent: () => false,
+	})) as unknown as typeof window.matchMedia;
+}
+
 describe("Dashboard", () => {
 	it("shows the empty-state alert when there are no shortcuts", () => {
 		render(<Dashboard />);
@@ -111,3 +142,142 @@ describe("Dashboard", () => {
 		expect(saved.shortcut_type).toBe("website");
 	});
 });
+
+// --- Mobile layout tests (spec R7.1, R7.2) ---
+
+function makeWidget(overrides: Partial<WidgetInstance> = {}): WidgetInstance {
+	return {
+		id: "w1",
+		service_id: null,
+		widget_kind: "static",
+		title: "Widget 1",
+		config: {},
+		enabled: true,
+		sort_order: 0,
+		created_at: 0,
+		updated_at: 0,
+		...overrides,
+	};
+}
+
+function makeService(
+	overrides: Partial<ServiceInstance> = {},
+): ServiceInstance {
+	return {
+		id: "svc1",
+		service_type: "jellyfin",
+		name: "Jellyfin",
+		config: {},
+		secrets_set: {},
+		enabled: true,
+		created_at: 0,
+		updated_at: 0,
+		...overrides,
+	};
+}
+
+describe("Dashboard mobile layout", () => {
+	it("renders widgets in a single column with an anchor bar below md", () => {
+		setMatchMedia(true); // mobile
+		serviceInstances = [
+			makeService({ id: "graf", service_type: "grafana" }),
+			makeService({ id: "jelly", service_type: "jellyfin" }),
+		];
+		widgetInstances = [
+			makeWidget({
+				id: "w-obs",
+				service_id: "graf",
+				widget_kind: "link",
+				title: "Grafana Link",
+			}),
+			makeWidget({
+				id: "w-media",
+				service_id: "jelly",
+				widget_kind: "activity",
+				title: "Jellyfin Activity",
+			}),
+			makeWidget({
+				id: "w-backup",
+				service_id: null,
+				widget_kind: "backups",
+				title: "Backup Summary",
+			}),
+		];
+
+		render(<Dashboard />);
+
+		// Anchor bar pills are visible for populated sections (each label appears
+		// in both the pill and the section heading, so use getAllByText).
+		expect(screen.getAllByText("Observability").length).toBeGreaterThanOrEqual(
+			1,
+		);
+		expect(screen.getAllByText("Media").length).toBeGreaterThanOrEqual(1);
+		expect(screen.getAllByText("Backups").length).toBeGreaterThanOrEqual(1);
+
+		// Sections with no widgets are NOT rendered.
+		expect(screen.queryByText("Custom")).not.toBeInTheDocument();
+
+		// Each widget renders.
+		expect(screen.getByText("Grafana Link")).toBeInTheDocument();
+		expect(screen.getByText("Jellyfin Activity")).toBeInTheDocument();
+		expect(screen.getByText("Backup Summary")).toBeInTheDocument();
+	});
+
+	it("does NOT render the anchor bar at desktop width", () => {
+		setMatchMedia(false); // desktop
+		serviceInstances = [makeService({ id: "graf", service_type: "grafana" })];
+		widgetInstances = [
+			makeWidget({
+				id: "w-obs",
+				service_id: "graf",
+				widget_kind: "link",
+				title: "Grafana Link",
+			}),
+		];
+
+		render(<Dashboard />);
+
+		// Widget renders (flat list, no section wrappers).
+		expect(screen.getByText("Grafana Link")).toBeInTheDocument();
+
+		// No section headings or anchor pills on desktop.
+		expect(screen.queryByText("Observability")).not.toBeInTheDocument();
+		expect(screen.queryByText("Media")).not.toBeInTheDocument();
+	});
+
+	it("anchor bar pills jump to their section via scrollIntoView", async () => {
+		setMatchMedia(true); // mobile
+		serviceInstances = [
+			makeService({ id: "graf", service_type: "grafana" }),
+			makeService({ id: "jelly", service_type: "jellyfin" }),
+		];
+		widgetInstances = [
+			makeWidget({
+				id: "w-obs",
+				service_id: "graf",
+				widget_kind: "link",
+				title: "Grafana Link",
+			}),
+			makeWidget({
+				id: "w-media",
+				service_id: "jelly",
+				widget_kind: "activity",
+				title: "Jellyfin Activity",
+			}),
+		];
+
+		const scrollSpy = vi.spyOn(Element.prototype, "scrollIntoView");
+
+		render(<Dashboard />);
+
+		// The Media section element exists.
+		expect(document.getElementById("dashboard-section-media")).not.toBeNull();
+
+		// Click the "Media" anchor pill (button role disambiguates from heading).
+		const mediaPill = screen.getByRole("button", { name: "Media" });
+		await userEvent.click(mediaPill);
+
+		expect(scrollSpy).toHaveBeenCalled();
+		scrollSpy.mockRestore();
+	});
+});
@@ -8,6 +8,7 @@ import type { DirectoryListing, MonitoringMachine } from "../../types";
 // so the selectedPath / currentDir state never leaks across cases.
 beforeEach(() => {
 	window.localStorage.clear();
+	setMatchMedia(false);
 });

 function machineFixture(
@@ -77,6 +78,30 @@ beforeEach(() => {
 	]);
 });

+/** Stub window.matchMedia so useIsMobile resolves in jsdom (Slice 4). */
+function setMatchMedia(matches: boolean) {
+	const listeners: ((e: MediaQueryListEvent) => void)[] = [];
+	window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+		matches: query.includes("768") ? matches : false,
+		media: query,
+		onchange: null,
+		addEventListener: (
+			_evt: string,
+			listener: (e: MediaQueryListEvent) => void,
+		) => listeners.push(listener),
+		removeEventListener: (
+			_evt: string,
+			listener: (e: MediaQueryListEvent) => void,
+		) => {
+			const idx = listeners.indexOf(listener);
+			if (idx >= 0) listeners.splice(idx, 1);
+		},
+		addListener: () => {},
+		removeListener: () => {},
+		dispatchEvent: () => false,
+	}));
+}
+
 describe("FileBrowser (slice 7a — TanStack DataTable parity)", () => {
 	it("renders the 5 locked columns (type/name/ext/size/modified)", () => {
 		render(<FileBrowser />);
@@ -118,3 +143,56 @@ describe("FileBrowser (slice 7a — TanStack DataTable parity)", () => {
 		expect(screen.queryByText(/Selected:/)).toBeNull();
 	});
 });
+
+describe("FileBrowser (mobile card layout — slice 4)", () => {
+	it("renders cards with file/dir name as primary below md", () => {
+		setMatchMedia(true);
+		render(<FileBrowser />);
+
+		// Card titles (the 'name' field rendered as primary).
+		expect(screen.getByText("movies")).toBeInTheDocument();
+		expect(screen.getByText("video.mkv")).toBeInTheDocument();
+		expect(screen.getByText("notes.txt")).toBeInTheDocument();
+
+		// Desktop table column headers must NOT render.
+		const headers = screen.queryAllByRole("columnheader");
+		expect(headers).toHaveLength(0);
+	});
+
+	it("tapping a directory card navigates into it", async () => {
+		setMatchMedia(true);
+		render(<FileBrowser />);
+
+		// Directory card is a button wrapping the 'movies' text.
+		await userEvent.click(screen.getByText("movies"));
+
+		// After navigating into /movies, the status caption shows the new cwd
+		// and NO 'Selected:' segment (directories are opened, not selected).
+		expect(screen.getByText(/Current: \/movies\b/)).toBeInTheDocument();
+		expect(screen.queryByText(/Selected:/)).toBeNull();
+	});
+
+	it("renders the path/breadcrumb controls on mobile", () => {
+		setMatchMedia(true);
+		render(<FileBrowser />);
+
+		// The 'Remote path' label and its input are part of the Browser section
+		// card (outside the table), so they render on both breakpoints.
+		expect(screen.getByLabelText("Remote path")).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Open" })).toBeInTheDocument();
+		expect(screen.getByRole("button", { name: "Refresh" })).toBeInTheDocument();
+	});
+
+	it("renders the DataTable at desktop width (1280px)", () => {
+		setMatchMedia(false);
+		render(<FileBrowser />);
+
+		// Desktop path: table column headers are present.
+		const headers = screen
+			.getAllByRole("columnheader")
+			.map((h) => h.textContent);
+		expect(headers).toEqual(
+			expect.arrayContaining(["Type", "Name", "Ext", "Size", "Modified"]),
+		);
+	});
+});
@@ -129,7 +129,11 @@ vi.mock("../../hooks/useDashboard", () => ({

 // usePersistentState reads/writes localStorage; clear between tests so the
 // offset/pageSize/columnVisibility state never leaks across cases.
+// matchMedia must be stubbed so useIsMobile (md:768px) and usePrefersSmallScreen
+// (900px) resolve without TypeError in jsdom. Default to desktop (matches:false)
+// so the DataTable path renders by default; mobile tests override.
 beforeEach(() => {
+	setMatchMedia(false);
 	window.localStorage.clear();
 	navigate.mockClear();
 	status = statusFixture();
@@ -152,6 +156,30 @@ beforeEach(() => {
 	};
 });

+/** Stub window.matchMedia so useIsMobile / usePrefersSmallScreen resolve in jsdom. */
+function setMatchMedia(matches: boolean) {
+	const listeners: ((e: MediaQueryListEvent) => void)[] = [];
+	window.matchMedia = vi.fn().mockImplementation((query: string) => ({
+		matches: query.includes("768") ? matches : false,
+		media: query,
+		onchange: null,
+		addEventListener: (
+			_evt: string,
+			listener: (e: MediaQueryListEvent) => void,
+		) => listeners.push(listener),
+		removeEventListener: (
+			_evt: string,
+			listener: (e: MediaQueryListEvent) => void,
+		) => {
+			const idx = listeners.indexOf(listener);
+			if (idx >= 0) listeners.splice(idx, 1);
+		},
+		addListener: () => {},
+		removeListener: () => {},
+		dispatchEvent: () => false,
+	}));
+}
+
 describe("Media (slice 7b — TanStack DataTable + server-driven pagination)", () => {
 	it("exposes exactly the 15 locked toggleable columns", async () => {
 		render(<Media />);
@@ -261,3 +289,68 @@ describe("Media (slice 7b — TanStack DataTable + server-driven pagination)", (
 		).toBeInTheDocument();
 	});
 });
+
+describe("Media (mobile card layout — slice 3)", () => {
+	it("renders cards with the title as primary below md", () => {
+		setMatchMedia(true);
+		render(<Media />);
+
+		// Card titles render (primary field).
+		expect(screen.getByText("Inception")).toBeInTheDocument();
+		expect(screen.getByText("Matrix")).toBeInTheDocument();
+
+		// Card field labels render (at least once per row).
+		expect(screen.getAllByText("Size").length).toBeGreaterThanOrEqual(2);
+		expect(screen.getAllByText("HDR").length).toBeGreaterThanOrEqual(2);
+		expect(screen.getAllByText("Library").length).toBeGreaterThanOrEqual(2);
+		expect(screen.getAllByText("Year").length).toBeGreaterThanOrEqual(2);
+
+		// Desktop table headers do NOT render on mobile.
+		expect(screen.queryByRole("columnheader", { name: "Title" })).toBeNull();
+		expect(screen.queryByRole("columnheader", { name: "Bitrate" })).toBeNull();
+	});
+
+	it("hides the column-visibility toggle below md", () => {
+		setMatchMedia(true);
+		render(<Media />);
+
+		expect(screen.queryByRole("button", { name: /Columns/ })).toBeNull();
+	});
+
+	it("renders pagination controls below the cards on mobile", () => {
+		setMatchMedia(true);
+		render(<Media />);
+
+		expect(screen.getByText("2 rows")).toBeInTheDocument();
+		expect(screen.getAllByText(/Page 1 of 1/).length).toBeGreaterThan(0);
+		expect(
+			screen.getByRole("button", { name: "Previous page" }),
+		).toBeDisabled();
+		expect(
+			screen.getByRole("button", { name: "Next page" }),
+		).toBeInTheDocument();
+	});
+
+	it("navigates to the file browser when a card is tapped on mobile", async () => {
+		setMatchMedia(true);
+		render(<Media />);
+
+		await userEvent.click(screen.getByText("Inception"));
+
+		expect(navigate).toHaveBeenCalledTimes(1);
+		expect(navigate).toHaveBeenCalledWith(
+			`/files?path=${encodeURIComponent("/media/movies/Inception.mkv")}`,
+		);
+	});
+
+	it("renders the DataTable (not cards) at desktop width", () => {
+		render(<Media />);
+
+		// Desktop column headers render.
+		expect(
+			screen.getByRole("columnheader", { name: "Title" }),
+		).toBeInTheDocument();
+		// Column-visibility toggle is present.
+		expect(screen.getByRole("button", { name: /Columns/ })).toBeInTheDocument();
+	});
+});
@@ -9,8 +9,10 @@ import type {
 	UserDirectoryResponse,
 } from "../../types";

-// jsdom has no window.matchMedia; MUI `useMediaQuery` (still used by the
-// compose dialog, slice 6b) must not blow up during render. Stub to "desktop".
+// jsdom has no window.matchMedia; the shared `useIsMobile` hook and the
+// compose dialog viewport hook must not blow up during render. Stub to
+// "desktop" (matches: false) by default; the slice-5 describe block flips it
+// to mobile for card-layout assertions.
 beforeEach(() => {
 	if (!window.matchMedia) {
 		window.matchMedia = ((query: string) => ({
@@ -283,3 +285,61 @@ describe("UsersPage (slice 6b — compose dialog formatting actions)", () => {
 		expect(body.value).toContain("<strong>");
 	});
 });
+
+	describe("UsersPage (mobile card layout — slice 5)", () => {
+	beforeEach(() => {
+		window.matchMedia = ((query: string) => ({
+			matches: query.includes("768"),
+			media: query,
+			onchange: null,
+			addEventListener: () => {},
+			removeEventListener: () => {},
+			addListener: () => {},
+			removeListener: () => {},
+			dispatchEvent: () => false,
+		})) as unknown as typeof window.matchMedia;
+	});
+
+	it("renders user cards with display name as primary below md", () => {
+		users = [
+			userFixture({ jellyfin_id: "u1", display_name: "Alice" }),
+			userFixture({
+				jellyfin_id: "u2",
+				username: "bob",
+				display_name: "Bob",
+			}),
+		];
+
+		render(
+			<TooltipProvider>
+				<UsersPage />
+			</TooltipProvider>,
+		);
+
+		expect(screen.getByText("Alice")).toBeInTheDocument();
+		expect(screen.getByText("Bob")).toBeInTheDocument();
+		// Activity field label should appear per card.
+		expect(screen.getAllByText("Activity")).toHaveLength(2);
+	});
+
+	it("toggles selection from the card checkbox without opening the drawer", async () => {
+		users = [userFixture({ jellyfin_id: "u1", display_name: "Alice" })];
+		render(
+			<TooltipProvider>
+				<UsersPage />
+			</TooltipProvider>,
+		);
+
+		const checkbox = screen.getByRole("checkbox", {
+			name: /Select Alice/i,
+		});
+		expect(checkbox).toHaveAttribute("data-state", "unchecked");
+
+		await userEvent.click(checkbox);
+		expect(checkbox).toHaveAttribute("data-state", "checked");
+
+		// Drawer stays closed: the session-panel stub only renders when the
+		// drawer opens via a card-body tap, not via the checkbox.
+		expect(screen.queryByTestId("session-panel-stub")).not.toBeInTheDocument();
+	});
+});
@@ -0,0 +1,167 @@
+# Design — Mobile responsive parity
+
+**Change:** `mobile-responsive-parity`
+**Phase:** design
+**Date:** 2026-06-26
+
+## Context
+
+Frontend stack recap: React 18 + Vite + TanStack Query + TanStack Table +
+Tailwind v4 (CSS `@theme` in `src/index.css`) + shadcn/ui (Radix primitives) +
+lucide-react + react-router-dom + react-oidc-context. The app shell
+(`App.tsx`) is already responsive via a `md:` (768px) cut and a `MobileDrawer`
+`Sheet`. The content layer is not.
+
+This design adds four **shared primitives** and applies them per-page. It does
+not introduce new libraries.
+
+## Architecture
+
+### Shared primitives (PR 1)
+
+#### 1. `MobileCardRow<T>` — card renderer for TanStack Table rows
+
+Lives in `src/components/ui/mobile-card.tsx` (new). Generic over the row data
+type. Reused by the four wide tables.
+
+```tsx
+export interface MobileCardField<T> {
+  key: string;
+  label: string;
+  render: (row: T) => React.ReactNode;
+  /** When true, render as the card title (bold, larger). Exactly one per card. */
+  primary?: boolean;
+}
+
+export interface MobileCardRowProps<T> {
+  rows: TData[];
+  fields: MobileCardField<T>[];
+  onRowClick?: (row: T) => void;
+  /** Optional right-aligned action slot (edit/delete icon buttons). */
+  actions?: (row: T) => React.ReactNode;
+}
+```
+
+Renders a vertical list of cards. Each card shows the `primary` field as the
+title and the remaining fields as a key/value stack. The whole card is a button
+when `onRowClick` is set (44px min height).
+
+The consuming page decides which fields to show — this primitive does not pick
+them.
+
+#### 2. `useIsMobile()` — single source of truth for the breakpoint
+
+Lives in `src/hooks/useIsMobile.ts` (new). Wraps
+`matchMedia("(max-width: 768px)")`, SSR-safe, returns a boolean. Replaces the
+inline `window.matchMedia` reads in `App.tsx` and the ad-hoc `usePrefersSmallScreen`
+usage in `Media.tsx`. One breakpoint, one hook.
+
+```ts
+export function useIsMobile(): boolean {
+  const [isMobile, setIsMobile] = useState(() =>
+    typeof window !== "undefined" && window.matchMedia("(max-width: 768px)").matches
+  );
+  useEffect(() => {
+    const mql = window.matchMedia("(max-width: 768px)");
+    const handler = (e: MediaQueryListEvent) => setIsMobile(e.matches);
+    mql.addEventListener("change", handler);
+    return () => mql.removeEventListener("change", handler);
+  }, []);
+  return isMobile;
+}
+```
+
+#### 3. `SheetForm` — full-height form host
+
+Lives in `src/components/ui/sheet-form.tsx` (new). Wraps the shadcn `Sheet`
+primitive. Props: `open`, `onOpenChange`, `title`, `onSave`, `onCancel`,
+`isPending`, `children`. Renders sticky header (`title` + `X`) and sticky
+footer (`Cancel` / `Save`). Body scrolls.
+
+Below `md`, used by ServicePage, Settings, message compose, WidgetConfigDialog.
+At `md:` and above, the existing `Dialog` is used unchanged. The choice is made
+in the consumer with `useIsMobile()`, not inside `SheetForm`, so the same form
+body can be reused across both hosts.
+
+#### 4. `EditActionButton` — touch-aware edit affordance
+
+Replaces `HoverEditButton`'s role (not its file — we extend the existing
+component). Add a `mobile="always"` prop (default). Below `md`, the button is
+always visible (no hover-gated opacity). At `md:` and above, current
+hover-reveal behavior is preserved. Implementation: a `md:opacity-0
+md:group-hover:opacity-100` Tailwind stack, i.e. always visible by default,
+hidden-then-revealed on hover at `md:` and up.
+
+### Per-page application (PRs 2–9)
+
+Each wide-table page renders `<MobileCardRow>` below `md` and the existing
+`<DataTable>` at/above `md`. The page wires up the field list. Example for
+Media:
+
+```tsx
+const isMobile = useIsMobile();
+const fields: MobileCardField<MediaItem>[] = [
+  { key: "title", label: "Title", render: (r) => r.title, primary: true },
+  { key: "size", label: "Size", render: (r) => r.size_display },
+  { key: "hdr", label: "HDR", render: (r) => (r.is_hdr ? "HDR" : "") },
+  { key: "library", label: "Library", render: (r) => r.library_name },
+];
+return isMobile
+  ? <MobileCardRow rows={rows} fields={fields} onRowClick={onRowClick} actions={(r) => <EditActionButton onClick={...} />} />
+  : <DataTable columns={columns} data={rows} /* ...existing props */ />;
+```
+
+### Touch-target audit (PR 1, applied throughout)
+
+A single `min-h-11 min-w-11` (44px) utility class is applied to interactive
+shadcn primitives below `md`. Applied via a `mobile-touch-target` Tailwind
+utility class registered in `tailwind.config.cjs` (or as a Tailwind v4 CSS
+utility in `src/index.css`). The class adds `min-height: 44px; min-width: 44px`
+only below `md`:
+
+```css
+@media (max-width: 767px) {
+  .mobile-touch-target,
+  .mobile-touch-target::before {
+    min-height: 44px;
+    min-width: 44px;
+  }
+}
+```
+
+Pages add the class to icon buttons, checkboxes, switches, and row taps during
+their per-page PR.
+
+## Breakpoints
+
+- `< 768px` (`isMobile === true`): mobile layout — cards, Sheet forms, always-
+  visible edit, single-column dashboard, anchor bar.
+- `≥ 768px`: existing desktop layout, unchanged.
+
+No `sm:` cut. No `lg:` cut.
+
+## Key technical risks & mitigations
+
+- **TanStack column defs vs. card fields drift.** Each page that renders a card
+  must declare its mobile fields in one place; tests assert the card shows the
+  primary field at 375px. If a column is renamed, the card test fails.
+- **iOS Safari `100dvh`.** `SheetForm` uses `h-[100dvh]` (not `h-screen`) to
+  avoid the iOS URL-bar resize jump. Tested manually on iOS Safari.
+- **`position: sticky` inside `SheetContent`.** Radix `Sheet` uses transforms;
+  sticky must be relative to the scroll container inside the sheet body, not the
+  sheet itself. The sticky header/footer are siblings of the scrolling body
+  inside a flex column, not sticky-positioned.
+- **OIDC redirect after login.** No change: responsive web only, OIDC continues
+  to redirect within the same browser tab.
+
+## Trade-offs
+
+- **Card layouts duplicate field definitions** (once as TanStack columns, once
+  as `MobileCardField[]`). Accepted: the alternative (auto-deriving cards from
+  column defs) produces bad mobile UX because column defs are not ordered by
+  mobile importance.
+- **44px touch targets** slightly increase mobile visual density compared to a
+  32px design, but meet WCAG 2.5.5. Accepted.
+- **`useIsMobile()` per-page render branching** is preferred over CSS-only
+  `hidden md:block` because the card and table have different data dependencies
+  (e.g. row click handlers, selection state) and mounting both wastes work.
@@ -0,0 +1,114 @@
+# Proposal — Mobile responsive parity
+
+**Change:** `mobile-responsive-parity`
+**Phase:** proposal
+**Date:** 2026-06-26
+
+## Problem
+
+The Manage frontend ships a responsive **app shell** (hamburger drawer,
+`MobileDrawer`, `md:` breakpoint at 768px, correct viewport meta) but the
+**content layer** assumes a desktop viewport. Concretely:
+
+1. **Data tables render as literal `<table>` elements with no mobile affordance.**
+   Seven tables (Media, FileBrowser, UsersPage, BackupAlertsTable,
+   BackupJobsTable, BackupRunsTable, SessionActivityPanel) overflow or clip on a
+   375px screen. The Media page's TanStack column-visibility toggle is unusable
+   on touch.
+2. **Edit forms open in centered `Dialog`s with multi-column grids.** ServicePage
+   config, Settings (machines/SSH keys), the message compose dialog, and
+   `WidgetConfigDialog` cramp or overflow on phones; save actions drift off-screen.
+3. **`HoverEditButton` and row-hover actions do not fire on touch devices.**
+   Edit affordances are invisible to phone users.
+4. **Touch targets violate mobile accessibility standards.** shadcn defaults
+   (32px buttons, dense rows) are below the 44px minimum that WCAG 2.5.5 / Apple
+   HIG require for touch.
+5. **The Dashboard widget grid does not collapse.** The configurable grid has no
+   single-column mobile layout, so a multi-widget dashboard sideways-scrolls or
+   clips.
+
+The result: the app **launches** on a phone but cannot be **operated** there.
+Several flows (create service, edit widget layout, build media index, manage SSH
+keys) are effectively desktop-only.
+
+## Proposal
+
+Make every route fully usable in phone portrait (≥360px) at a single `md:`
+(768px) cut. Tablets keep the desktop layout. No desktop-only flows survive.
+
+1. **Hybrid data-table strategy.** The four wide tables (Media, FileBrowser,
+   Users, Backups) render a stacked **card per row** below `md`, each card
+   picking the 3–5 most important fields. Narrow tables (SessionActivity) keep
+   horizontal scroll. The TanStack column-visibility toggle is hidden below `md`
+   (the card picks the fields).
+2. **Sheet-based edit forms.** Below `md`, ServicePage, Settings, message
+   compose, and `WidgetConfigDialog` open inside a full-height `Sheet` (reusing
+   the existing primitive) with a sticky header and a sticky save bar — instead
+   of the centered `Dialog`.
+3. **Replace `HoverEditButton` with an always-visible variant** below `md`. Row
+   edit/delete actions surface as small, persistent icon buttons on the right of
+   each row/card.
+4. **Touch-target audit.** All interactive elements below `md` get a 44px
+   minimum hit area (buttons, checkboxes, row taps, badges-as-buttons).
+5. **Dashboard mobile layout.** The widget grid collapses to a single column
+   below `md`, with a section anchor bar (Observability / Media / Backups /
+   Custom) at the top for quick navigation.
+6. **Responsive web only.** No PWA, no manifest, no service worker. OIDC keeps
+   working in-browser as it does today.
+7. **Per-page delivery.** Ship ~9 chained PRs, one per route (plus a primitives
+   PR), each ≤400 changed lines, each leaving `npm run lint`, `npm run build`
+   (tsc -b + vite build), and `npm run test` green.
+
+## Non-goals
+
+- **No tablet-specific layout.** Tablets use the existing desktop layout at
+  `md:` and above.
+- **No PWA / installability.** No manifest, service worker, offline mode, or
+  standalone display mode. This is a responsive website.
+- **No change to polling intervals.** Widget refresh (≈30s) and the
+  message-queue poll (5s) keep desktop semantics. (Flagged as a follow-up risk;
+  see §Risks.)
+- **No new data-table library.** TanStack Table stays; card layouts render from
+  the same row data, not from a separate component library.
+- **No backend changes.** The API contract is unchanged.
+- **No landscape-phone or small-tablet (`sm:`) intermediate layout.** A single
+  `md:` cut is the target.
+- **No new product features.** This is a presentation-layer parity change.
+
+## Key technical risks
+
+- **TanStack Table → card rendering** is not automatic. Each of the four wide
+  tables needs a per-table card variant that picks which fields to show; this is
+  where most of the implementation risk and review burden lives.
+- **`Sheet` as a form host** is novel in this codebase (currently used only for
+  the nav drawer). Sticky header + sticky save bar must work across iOS Safari
+  and Chrome Android, including inside the OIDC-triggering keyboard insets.
+- **iOS Safari quirks**: viewport `100dvh`, attachment upload from Files,
+  `position: sticky` inside transformed ancestors. Each may need targeted fixes.
+- **`HoverEditButton` replacement** must not regress the desktop hover-reveal
+  aesthetic — only the mobile behavior changes.
+
+## Risks (not blocking, flagged for later)
+
+- **D8 — Polling on battery.** The dashboard (the page most likely to be left
+  open on a phone) polls every ~30s per widget plus the 5s queue-status poll.
+  Per the decision matrix, intervals stay identical to desktop. Cheapest future
+  mitigation: a single `useEffect` on `document.visibilityState` that pauses
+  TanStack refetch when the tab is hidden (~10 lines, zero UX cost). Revisit
+  after parity ships if battery complaints arise.
+
+## Decision matrix (from grilling)
+
+| # | Decision | Choice |
+|---|----------|--------|
+| D1 | Parity target | Full parity — no desktop-only flows |
+| D2 | Data tables | Hybrid: cards below `md` for the big four; scroll for narrow; toggle hidden |
+| D3 | Forms | Full-height `Sheet` below `md`, sticky header + sticky save bar |
+| D4 | Touch edit | Always-visible edit button below `md` |
+| D5 | Installable | Responsive web only — no PWA |
+| D6 | Devices | Phone portrait only, single `md:` (768px) cut |
+| D7 | Dashboard | Single-column stack + section anchor bar |
+| D8 | Polling | Same intervals as desktop (flagged risk) |
+| D9 | Touch targets | 44px minimum below `md` |
+| D10 | Testing | Vitest per breakpoint + manual device-mode check |
+| D11 | Delivery | Per-page PRs (~9), primitives PR first |
@@ -0,0 +1,137 @@
+# Spec — Mobile responsive parity
+
+**Change:** `mobile-responsive-parity`
+**Phase:** spec
+**Date:** 2026-06-26
+
+## Scope
+
+All 9 application routes must be fully operable in phone portrait viewports
+(≥360px) at a single `md:` (768px) breakpoint. Tablets and wider viewports keep
+the existing desktop layout unchanged. No product behavior changes; this is a
+presentation-layer parity change only.
+
+## Requirements
+
+### R1 — Viewport & breakpoint policy
+
+- R1.1 The viewport meta stays `width=device-width, initial-scale=1.0` (no zoom
+  lock). User zoom remains enabled.
+- R1.2 There is exactly one responsive cut: `md:` (768px). Below is "mobile";
+  at-or-above is "desktop" (existing behavior).
+- R1.3 No `sm:` intermediate cut is introduced.
+
+### R2 — App shell (already compliant; locked in)
+
+- R2.1 Desktop `Sidebar` renders `null` when `isMobile` (`matchMedia("(max-width:
+  768px)")`).
+- R2.2 Mobile nav uses the existing `MobileDrawer` (hamburger, `md:hidden`,
+  `Sheet` side=left) with no behavioral change.
+- R2.3 `TopBar` keeps its existing responsive behavior (version badges hidden
+  on small screens, hamburger visible below `md`).
+
+### R3 — Data tables (hybrid)
+
+- R3.1 The four wide tables — **Media** (`pages/Media.tsx`), **FileBrowser**
+  (`pages/FileBrowser.impl.tsx`), **Users** (`pages/UsersPage.impl.tsx`), and the
+  three **Backups** tables (`BackupAlertsTable.tsx`, `BackupJobsTable.tsx`,
+  `BackupRunsTable.tsx`) — render a stacked **card per row** below `md`.
+- R3.2 Each card shows a primary title plus the 3–5 most important fields for
+  that table (chosen per-table; documented in tasks). All remaining fields are
+  omitted from the mobile card.
+- R3.3 Row click / selection semantics are preserved on the card (tap target =
+  the whole card where applicable).
+- R3.4 **SessionActivityPanel** (narrow, 3-column) keeps the `<table>` shape
+  inside a horizontal-scroll container below `md`.
+- R3.5 The TanStack **column-visibility toggle is hidden below `md`** on every
+  table that uses it (Media). The mobile card picks the fields; the user does
+  not re-show hidden columns on touch.
+- R3.6 At `md:` and above, all tables render exactly as today.
+
+### R4 — Edit forms (Sheet)
+
+- R4.1 Below `md`, these edit flows open in a full-height `Sheet` (side=bottom
+  or side=right, full screen) instead of a centered `Dialog`:
+  - **ServicePage** connection config + secrets
+  - **Settings** machines and SSH-key editors
+  - **Message compose** dialog (`UsersPage.impl.tsx`)
+  - **WidgetConfigDialog**
+- R4.2 The Sheet form has a sticky header (title + close affordance) and a
+  sticky footer/save bar (Cancel + Save).
+- R4.3 Form fields stack to a single column inside the Sheet.
+- R4.4 At `md:` and above, the existing `Dialog`-based forms are unchanged.
+- R4.5 The Sheet closes on successful save and on explicit cancel; it does not
+  close on outside-click while the form is dirty (confirm prompt).
+
+### R5 — Touch edit affordance
+
+- R5.1 `HoverEditButton` gains a `md:` variant: hover-revealed on desktop
+  (unchanged), **always visible** below `md`.
+- R5.2 Row/card edit and delete actions surface as persistent icon buttons on
+  the right edge below `md`.
+- R5.3 Desktop hover-reveal aesthetic is not regressed at `md:` and above.
+
+### R6 — Touch targets
+
+- R6.1 All interactive elements below `md` have a minimum 44×44px hit area.
+  This includes: buttons, icon buttons, checkboxes, switches, row/card tap
+  targets, and badges that act as buttons.
+- R6.2 Visual size may remain smaller than 44px (padding-only hit areas are
+  acceptable) as long as the tappable region meets the minimum.
+- R6.3 At `md:` and above, sizes are unchanged.
+
+### R7 — Dashboard layout
+
+- R7.1 The widget grid collapses to a **single column** below `md`.
+- R7.2 A **section anchor bar** appears at the top of the dashboard below `md`,
+  grouping widgets (e.g. Observability / Media / Backups / Custom) and allowing
+  quick jump-to-section.
+- R7.3 Widget order respects the user's configured sort order.
+- R7.4 At `md:` and above, the grid renders exactly as today.
+
+### R8 — Polling (unchanged)
+
+- R8.1 Widget refresh intervals and the message-queue poll interval are
+  identical on mobile and desktop.
+- R8.2 (Follow-up risk, not in scope: pause refetch on `document.visibilityState
+  === "hidden"`. Tracked in proposal §Risks.)
+
+### R9 — No PWA
+
+- R9.1 No web manifest, service worker, or standalone display mode is added.
+- R9.2 OIDC continues to work in-browser; no standalone-mode redirect handling
+  is introduced.
+
+### R10 — Non-regression
+
+- R10.1 No desktop layout (≥768px) is visually or functionally regressed.
+- R10.2 No backend API contract change.
+- R10.3 No existing test is deleted; mobile-specific tests are additive.
+
+## Acceptance criteria
+
+- AC1 Every route listed in `App.tsx` `navItems` (Dashboard, Observability,
+  Media, Files, Backups, Users, Actions, Services, Settings) is fully operable
+  at 375px width in Chrome DevTools device mode (iPhone 12 Pro preset or
+  equivalent).
+- AC2 Each of the four wide tables shows a card layout at 375px and the table
+  layout at 1280px.
+- AC3 Each of the four edit forms opens in a Sheet at 375px and a Dialog at
+  1280px.
+- AC4 `HoverEditButton` is always visible at 375px and hover-revealed at 1280px.
+- AC5 A 44px-minimum touch-target audit passes for all interactive elements at
+  375px.
+- AC6 The Dashboard renders a single column with an anchor bar at 375px and the
+  existing grid at 1280px.
+- AC7 `cd frontend && npm run lint && npm run build && npm run test` is green.
+- AC8 At least one Vitest test per touched page asserts behavior at <768px and
+  ≥768px breakpoints.
+
+## Non-goals
+
+- Tablet/landscape/sm: intermediate layout.
+- PWA, manifest, service worker, offline mode.
+- Polling-interval changes.
+- Backend changes.
+- New data-table library.
+- New product features.
@@ -0,0 +1,226 @@
+# Tasks — Mobile responsive parity
+
+**Change:** `mobile-responsive-parity`
+**Phase:** tasks
+**Date:** 2026-06-26
+
+## Review workload forecast
+
+| Field | Value |
+|-------|-------|
+| Estimated changed lines | ~2200–2800 |
+| Chained PRs recommended | Yes (10 slices) |
+| Chain strategy | stacked-to-main |
+| Slice order | 1 (primitives) → 2 (Dashboard) → 3–5 (tables) → 6–8 (forms) → 9 (touch audit) → 10 (docs + verify) |
+
+Each slice is committed separately (user pref). Every slice must leave
+`cd frontend && npm run lint && npm run build && npm run test` green. Every
+touched page gains a Vitest case asserting behavior at <768px and ≥768px.
+
+---
+
+## Slice 1 — Shared primitives
+
+**Goal:** Land the four building blocks every later slice depends on. No
+page-level behavior changes yet.
+
+- [ ] **1.1 `useIsMobile()` hook**
+  - Files: `frontend/src/hooks/useIsMobile.ts` (new)
+  - Lines: ~20
+  - Details: SSR-safe `matchMedia("(max-width: 768px)")` listener per design.
+
+- [ ] **1.2 `MobileCardRow` component**
+  - Files: `frontend/src/components/ui/mobile-card.tsx` (new), plus a Vitest
+    spec `frontend/src/components/ui/__tests__/mobile-card.test.tsx`.
+  - Lines: ~80 + ~60 test
+  - Details: generic `<T,>`, fields list, `primary` field, optional `onRowClick`
+    and `actions` slot per design. 44px min card height.
+
+- [ ] **1.3 `SheetForm` component**
+  - Files: `frontend/src/components/ui/sheet-form.tsx` (new), plus spec.
+  - Lines: ~70 + ~50 test
+  - Details: wraps shadcn `Sheet`; sticky header + sticky footer; `h-[100dvh]`;
+    props per design. Dirty-state confirm on outside click.
+
+- [ ] **1.4 `EditActionButton` — extend `HoverEditButton`**
+  - Files: `frontend/src/components/HoverEditButton.tsx`
+  - Lines: ~15
+  - Details: add `mobile="always" | "hover"` (default `always`). Tailwind:
+    always visible below `md`, hover-revealed at `md:` and up.
+
+- [ ] **1.5 `mobile-touch-target` utility**
+  - Files: `frontend/src/index.css` (add utility)
+  - Lines: ~10
+  - Details: media-gated 44×44 min hit area per design.
+
+- [ ] **1.6 Replace inline `matchMedia` in `App.tsx`**
+  - Files: `frontend/src/App.tsx`
+  - Lines: ~10 removed, ~3 added
+  - Details: use `useIsMobile()`; preserve current shell behavior exactly.
+
+---
+
+## Slice 2 — Dashboard (R7)
+
+**Goal:** Dashboard collapses to single column + section anchor bar on mobile.
+
+- [ ] **2.1 Single-column grid below `md`**
+  - Files: `frontend/src/pages/Dashboard.tsx`
+  - Lines: ~20
+  - Details: widget list uses `grid grid-cols-1 md:grid-cols-*` (match existing
+    desktop column count). Respect configured sort order.
+
+- [ ] **2.2 Section anchor bar**
+  - Files: `frontend/src/pages/Dashboard.tsx`
+  - Lines: ~40
+  - Details: group widgets (Observability / Media / Backups / Custom). Anchor
+    bar `md:hidden`, horizontal scroll of pills, jumps to section by id.
+
+- [ ] **2.3 Tests**
+  - Files: `frontend/src/pages/__tests__/Dashboard.test.tsx`
+  - Lines: ~40
+  - Details: assert single column at 375px, grid at 1280px, anchor bar visible
+    only at <768px.
+
+---
+
+## Slice 3 — Media table (R3.1, R3.5)
+
+- [ ] **3.1 Mobile fields + card render**
+  - Files: `frontend/src/pages/Media.tsx`
+  - Lines: ~60
+  - Details: card primary = title; fields = size, HDR flag, library, year.
+    Hide column-visibility toggle below `md`. Preserve pagination controls.
+
+- [ ] **3.2 Tests**
+  - Files: `frontend/src/pages/__tests__/Media.test.tsx`
+  - Lines: ~40
+
+---
+
+## Slice 4 — FileBrowser table (R3.1)
+
+- [ ] **4.1 Mobile fields + card render**
+  - Files: `frontend/src/pages/FileBrowser.impl.tsx`
+  - Lines: ~60
+  - Details: card primary = name; fields = size, mtime, type. Preserve
+    directory-navigation tap target (whole card). Preserve ffprobe/job affordances.
+
+- [ ] **4.2 Tests**
+  - Files: `frontend/src/pages/__tests__/FileBrowser.test.tsx`
+  - Lines: ~30
+
+---
+
+## Slice 5 — Users + Backups tables (R3.1)
+
+- [ ] **5.1 UsersPage card**
+  - Files: `frontend/src/pages/UsersPage.impl.tsx`
+  - Lines: ~70
+  - Details: card primary = display name; fields = username, activity badge,
+    email (if present). Preserve selection checkboxes (44px) and drawer open.
+
+- [ ] **5.2 Backups cards (3 tables)**
+  - Files: `frontend/src/components/BackupAlertsTable.tsx`,
+    `frontend/src/components/BackupJobsTable.tsx`,
+    `frontend/src/components/BackupRunsTable.tsx`
+  - Lines: ~120 (3 × ~40)
+  - Details: per-table primary + 3 fields; preserve acknowledge/run actions on
+    the card.
+
+- [ ] **5.3 Tests**
+  - Files: existing component test files
+  - Lines: ~90
+
+---
+
+## Slice 6 — ServicePage form (R4)
+
+- [ ] **6.1 Sheet form below `md`**
+  - Files: `frontend/src/pages/ServicePage.tsx`
+  - Lines: ~60
+  - Details: branch on `useIsMobile()`; reuse form body inside `SheetForm`.
+    Single-column fields. Preserve save semantics.
+
+- [ ] **6.2 Tests**
+  - Files: `frontend/src/pages/__tests__/ServicePage.test.tsx` (new or extend)
+  - Lines: ~50
+
+---
+
+## Slice 7 — Settings form (R4)
+
+- [ ] **7.1 Machines + SSH-key editors in Sheet**
+  - Files: `frontend/src/pages/Settings.tsx`
+  - Lines: ~100
+  - Details: both machine editor and SSH-key editor open in `SheetForm` below
+    `md`. Validate-on-save preserved.
+
+- [ ] **7.2 Tests**
+  - Files: `frontend/src/pages/__tests__/Settings.test.tsx`
+  - Lines: ~40
+
+---
+
+## Slice 8 — Message compose + WidgetConfigDialog (R4)
+
+- [ ] **8.1 Message compose Sheet**
+  - Files: `frontend/src/pages/UsersPage.impl.tsx`
+  - Lines: ~60
+  - Details: compose dialog → `SheetForm` below `md`. HTML body textarea + iOS
+    Safari attachment upload verified manually.
+
+- [ ] **8.2 WidgetConfigDialog Sheet**
+  - Files: `frontend/src/components/WidgetConfigDialog.tsx`
+  - Lines: ~60
+  - Details: reorder list and per-widget config render inside `SheetForm` below
+    `md`. Sticky save bar.
+
+- [ ] **8.3 Tests**
+  - Files: extend existing
+  - Lines: ~60
+
+---
+
+## Slice 9 — Touch-target audit (R6)
+
+- [ ] **9.1 Apply `mobile-touch-target` across routes**
+  - Files: all 9 pages + shared components (`SessionActivityPanel`,
+    `ObservabilityPage`, etc.)
+  - Lines: ~150 (sprinkled)
+  - Details: icon buttons, checkboxes, switches, badges-as-buttons, row taps.
+    Manual device-mode pass at 375px logging violations; fix each.
+
+- [ ] **9.2 Audit log**
+  - Files: this PR description
+  - Details: list every element touched with before/after hit-area size.
+
+---
+
+## Slice 10 — Docs + verify
+
+- [ ] **10.1 Update `docs/REQUIREMENTS.md`**
+  - Files: `docs/REQUIREMENTS.md`
+  - Lines: ~20
+  - Details: add a Mobile section documenting the breakpoint, card/Sheet
+    behavior, 44px policy, and the polling follow-up risk.
+
+- [ ] **10.2 Cross-route manual pass**
+  - Details: walk all 9 routes at 375px (iPhone 12 Pro preset) and at 1280px.
+    Confirm no regressions; file follow-ups for any iOS Safari quirks found.
+
+- [ ] **10.3 Verify report**
+  - Files: `openspec/changes/mobile-responsive-parity/verify-report.md`
+  - Lines: ~80
+  - Details: per-AC evidence (AC1–AC8), tool versions, manual test notes.
+
+---
+
+## Notes
+
+- Each slice's diff should stay well under 400 changed lines. If a slice (e.g.
+  Settings at ~100 + 40 test) approaches the budget, split along the natural
+  sub-section boundary.
+- Slices 3–5 (tables) and 6–8 (forms) can be reordered or parallelized across
+  branches if helpful, but each must merge green.
+- No slice touches the backend.
Author	SHA1	Message	Date
Developer	2eb649eceb	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).	2026-06-26 13:24:19 +00:00
Developer	2076ab76fa	Mobile FileBrowser: stacked cards for file list (Slice 4) Below md, the file table renders as MobileCardRow cards: name as primary, plus type/size/modified. Whole-card tap triggers handleRowClick (dir rows navigate into the directory; file rows select for ffprobe preview). No pagination needed (FileBrowser does not paginate). The ext column is omitted from the card -- the extension is already visible in the filename itself, so it's redundant on mobile and would waste card space. Path bar / breadcrumbs / Open / Refresh live outside the table and already stack on mobile via existing md:flex-row. ffprobe and Jobs sections are unaffected. Desktop (md+) is byte-for-byte identical: the isMobile===false branch renders the same DataTable with the same props. Tests: 4 new covering mobile card render + dir-tap navigation + path controls present + desktop DataTable. matchMedia mocked per-breakpoint. 98 tests pass; lint/build green. Refs openspec/changes/mobile-responsive-parity/ (spec R3, tasks slice 4).	2026-06-26 12:53:25 +00:00
Developer	2e3e7b3850	Mobile Media table: stacked cards + mobile pagination (Slice 3) Below md, the Media DataTable renders as MobileCardRow cards: title as primary, plus size/HDR/library/year (3-5 fields, null-safe). Card tap navigates to /files?path=... (same handleRowClick as desktop). The TanStack column-visibility toggle is absent below md (the card picks the fields). Pagination is preserved via a standalone MediaMobilePagination component that mirrors DataTablePagination semantics (rows count, page-size select, page indicator, prev/next with correct disabled states) off the raw PaginationState. The duplication is flagged tech debt -- extracting a shared TablePagination is a follow-up, out of scope for this slice. Desktop (md+) is byte-for-byte identical: the isMobile===false branch renders the same DataTable with the same props. enableRowSelection state is vestigial (no batch consumer on either path); navigation is the correct primary mobile interaction. Tests: 5 new covering mobile cards + hidden column toggle + pagination + card-tap navigation, and desktop DataTable + column toggle. matchMedia mocked per-breakpoint. 94 tests pass; lint/build green. Refs openspec/changes/mobile-responsive-parity/ (spec R3, tasks slice 3).	2026-06-26 12:43:09 +00:00
Developer	c447dfe68d	Mobile dashboard layout: single column + section anchors (Slice 2) Below md, widgets render in a single column grouped by section (Observability / Media / Backups / Custom) with a horizontally-scrollable anchor pill bar that smooth-scrolls to each section. Empty sections are omitted from both the bar and the list. scroll-mt-16 keeps the sticky TopBar from covering section headings. Section mapping: observability (alertmanager/prometheus/grafana services), media (jellyfin), backups (builtin backups widget), custom (static, ssh_tasks, nextcloud, unknown, orphans). Within each section the user's configured sort order is preserved. Desktop (md+) is byte-for-byte unchanged -- the isMobile===false branch emits the original visibleWidgets.map(...) sequence with no wrapper. useServiceInstances() is cache-shared with WidgetInstanceCard (same TanStack key), so no extra network requests. Tests: 3 new (6 total) covering mobile single-column + anchors, desktop non-regression, and scrollIntoView jump. matchMedia mocked per-breakpoint. 89 tests pass; lint/build green. Refs openspec/changes/mobile-responsive-parity/ (spec R7, tasks slice 2).	2026-06-26 12:25:42 +00:00
Developer	688a18af22	Add mobile responsive primitives (Slice 1) Foundation for the mobile-responsive-parity change. Adds: - useIsMobile() hook: single source of truth for the md:768px cut (SSR-safe) - MobileCardRow<T>: stacked card list for wide tables below md, with getRowId stable keys, primary field as title, optional onRowClick + actions slot - SheetForm: full-height form host (h-[100dvh], flex column, sticky header + footer via flex not position:sticky) for mobile edit flows - HoverEditButton: mobile prop (default 'always') -- always visible below md, hover-revealed at md+; desktop aesthetic preserved - .mobile-touch-target CSS utility: 44x44 min hit area below md (WCAG 2.5.5) - App.tsx refactored to use useIsMobile(); shell behavior unchanged Tests cover primary/field rendering, onRowClick, actions slot, empty rows, no-primary, stable keys (no duplicate-key warning), and all SheetForm interactions. 86 tests pass; lint/build green. MobileCardRow key strategy: uses getRowId when provided (falls back to index); per design §trade-offs, fields are declared per-table to prioritize by mobile importance rather than auto-derived from column defs. Refs openspec/changes/mobile-responsive-parity/ (design §Shared primitives, spec R1/R5/R6, tasks slice 1).	2026-06-26 12:09:21 +00:00
Developer	18ee77a4e4	Plan mobile responsive parity (OpenSpec change) Add proposal/spec/design/tasks for full mobile parity across all 9 routes. Decisions: hybrid tables (cards below md for big four), Sheet-based forms, always-visible edit affordance, 44px touch targets, single-column dashboard with anchors, responsive web only (no PWA), phone portrait at md:768px cut. Polling unchanged (risk flagged). Delivery: 10 chained PRs, primitives first.	2026-06-26 11:49:47 +00:00