From eceb926d91c62ec34c13269a7ba12aef71a9591b Mon Sep 17 00:00:00 2001
From: luna <clawy@reversed.dev>
Date: Wed, 22 Jul 2026 20:16:16 +0000
Subject: [PATCH] feat(ui): improve mobile browser support

---
 UI/src/components/AgentModals.tsx      |  4 ++--
 UI/src/components/ChangeRenderer.tsx   |  6 +++---
 UI/src/components/Layout.tsx           | 14 +++++++-------
 UI/src/components/Modal.tsx            |  8 ++++----
 UI/src/components/NotificationBell.tsx |  2 +-
 UI/src/components/ui.tsx               |  8 ++++----
 UI/src/pages/Admin.tsx                 | 16 ++++++++--------
 UI/src/pages/Dashboard.tsx             |  6 +++---
 UI/src/pages/Login.tsx                 |  4 ++--
 UI/src/pages/RequestDetail.tsx         | 10 +++++-----
 UI/src/pages/Requests.tsx              | 10 +++++-----
 UI/src/pages/Settings.tsx              |  4 ++--
 12 files changed, 46 insertions(+), 46 deletions(-)

diff --git a/UI/src/components/AgentModals.tsx b/UI/src/components/AgentModals.tsx
index 8d65dbf..ad78967 100644
--- a/UI/src/components/AgentModals.tsx
+++ b/UI/src/components/AgentModals.tsx
@@ -210,12 +210,12 @@ curl -X POST ${origin}/v1/change-requests/{request_id}/consume -H "x-api-key: ${
 					</p>
 				)}
 
-				<div className="flex gap-1 border-b border-border">
+				<div className="flex gap-1 overflow-x-auto border-b border-border">
 					{tabs.map((t) => (
 						<button
 							key={t.id}
 							onClick={() => setTab(t.id)}
-							className={`px-3 py-2 text-sm font-medium transition ${
+							className={`shrink-0 px-3 py-2 text-sm font-medium transition ${
 								tab === t.id ? "border-b-2 border-primary text-text" : "text-muted hover:text-text"
 							}`}
 						>
diff --git a/UI/src/components/ChangeRenderer.tsx b/UI/src/components/ChangeRenderer.tsx
index 0bc6a84..89b71a0 100644
--- a/UI/src/components/ChangeRenderer.tsx
+++ b/UI/src/components/ChangeRenderer.tsx
@@ -59,18 +59,18 @@ function typeChip(label: string, color: string) {
 export function ChangeCard({ change, index }: { change: Change; index: number }) {
 	return (
 		<div className="rounded-xl border border-border bg-surface-raised/50 p-4">
-			<div className="mb-3 flex items-center gap-2">
+			<div className="mb-3 flex flex-wrap items-center gap-2">
 				<span className="text-xs font-mono text-faint">#{index + 1}</span>
 				{change.type === "unified_diff" && (
 					<>
 						{typeChip("diff", "bg-primary-dim/40 text-primary")}
-						<code className="text-sm text-text">{change.path}</code>
+					<code className="break-all text-sm text-text">{change.path}</code>
 					</>
 				)}
 				{change.type === "config" && (
 					<>
 						{typeChip("config", "bg-accent/15 text-accent")}
-						<code className="text-sm text-text">{change.path}</code>
+					<code className="break-all text-sm text-text">{change.path}</code>
 					</>
 				)}
 				{change.type === "custom" && (
diff --git a/UI/src/components/Layout.tsx b/UI/src/components/Layout.tsx
index 3d947c0..f8e9695 100644
--- a/UI/src/components/Layout.tsx
+++ b/UI/src/components/Layout.tsx
@@ -18,11 +18,11 @@ export function Layout({ children }: { children: ReactNode }) {
 	return (
 		<div className="min-h-screen">
 			<header className="sticky top-0 z-30 border-b border-border bg-bg/80 backdrop-blur">
-				<div className="mx-auto flex max-w-6xl items-center justify-between px-4 py-3">
-					<div className="flex items-center gap-6">
+				<div className="mx-auto flex max-w-6xl items-center justify-between gap-2 px-3 py-3 sm:px-4">
+					<div className="flex min-w-0 items-center gap-3 sm:gap-6">
 						<Link to="/" className="flex items-center gap-2">
-							<span className="text-xl">✅</span>
-							<span className="text-lg font-bold tracking-tight">
+							<span className="hidden text-xl xs:inline">✅</span>
+							<span className="text-base font-bold tracking-tight sm:text-lg">
 								Patch<span className="text-primary">Pass</span>
 							</span>
 						</Link>
@@ -56,7 +56,7 @@ export function Layout({ children }: { children: ReactNode }) {
 						</nav>
 					</div>
 
-					<div className="flex items-center gap-2">
+					<div className="flex shrink-0 items-center gap-1 sm:gap-2">
 						<NotificationBell />
 						<div className="relative">
 							<button
@@ -102,7 +102,7 @@ export function Layout({ children }: { children: ReactNode }) {
 					</div>
 				</div>
 				{/* mobile nav */}
-				<nav className="flex items-center gap-1 overflow-x-auto border-t border-border px-4 py-2 md:hidden">
+				<nav className="flex snap-x items-center gap-1 overflow-x-auto border-t border-border px-3 py-2 md:hidden sm:px-4">
 					{navItems.map((item) => (
 						<NavLink
 							key={item.to}
@@ -125,7 +125,7 @@ export function Layout({ children }: { children: ReactNode }) {
 				</nav>
 			</header>
 
-			<main className="mx-auto max-w-6xl px-4 py-8">{children}</main>
+			<main className="mx-auto max-w-6xl px-3 py-5 sm:px-4 sm:py-8">{children}</main>
 
 			<footer className="mx-auto max-w-6xl px-4 py-8 text-center text-xs text-faint">
 				<div className="flex flex-wrap items-center justify-center gap-3">
diff --git a/UI/src/components/Modal.tsx b/UI/src/components/Modal.tsx
index 2c878e0..8f8f01e 100644
--- a/UI/src/components/Modal.tsx
+++ b/UI/src/components/Modal.tsx
@@ -34,10 +34,10 @@ export function Modal({
 	if (!open) return null;
 
 	return (
-		<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+		<div className="fixed inset-0 z-50 flex items-end justify-center p-0 sm:items-center sm:p-4">
 			<div className="absolute inset-0 bg-black/60 backdrop-blur-sm" onClick={onClose} />
 			<div
-				className={`animate-fade-in relative z-10 w-full ${wide ? "max-w-3xl" : "max-w-lg"} rounded-2xl border border-border-strong bg-surface shadow-2xl`}
+				className={`animate-fade-in relative z-10 flex max-h-[92dvh] w-full flex-col ${wide ? "max-w-3xl" : "max-w-lg"} rounded-t-2xl border border-border-strong bg-surface shadow-2xl sm:max-h-[90vh] sm:rounded-2xl`}
 			>
 				<div className="flex items-center justify-between border-b border-border px-5 py-4">
 					<h2 className="text-lg font-semibold text-text">{title}</h2>
@@ -51,8 +51,8 @@ export function Modal({
 						</svg>
 					</button>
 				</div>
-				<div className="max-h-[70vh] overflow-y-auto px-5 py-4">{children}</div>
-				{footer && <div className="flex justify-end gap-2 border-t border-border px-5 py-4">{footer}</div>}
+				<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4 sm:px-5">{children}</div>
+				{footer && <div className="flex flex-wrap justify-end gap-2 border-t border-border px-4 py-3 sm:px-5 sm:py-4">{footer}</div>}
 			</div>
 		</div>
 	);
diff --git a/UI/src/components/NotificationBell.tsx b/UI/src/components/NotificationBell.tsx
index fea77fe..0787519 100644
--- a/UI/src/components/NotificationBell.tsx
+++ b/UI/src/components/NotificationBell.tsx
@@ -39,7 +39,7 @@ export function NotificationBell() {
 			</button>
 
 			{open && (
-				<div className="animate-fade-in absolute right-0 z-40 mt-2 w-80 rounded-xl border border-border-strong bg-surface shadow-2xl">
+				<div className="animate-fade-in fixed inset-x-3 top-14 z-40 mt-2 rounded-xl border border-border-strong bg-surface shadow-2xl sm:absolute sm:inset-x-auto sm:top-auto sm:w-80">
 					<div className="flex items-center justify-between border-b border-border px-4 py-2.5">
 						<span className="text-sm font-semibold">Notifications</span>
 						<div className="flex gap-2 text-xs">
diff --git a/UI/src/components/ui.tsx b/UI/src/components/ui.tsx
index c9411f3..af01772 100644
--- a/UI/src/components/ui.tsx
+++ b/UI/src/components/ui.tsx
@@ -21,7 +21,7 @@ export function Button({
 		<button
 			{...props}
 			disabled={props.disabled || loading}
-			className={`inline-flex items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition disabled:opacity-50 disabled:cursor-not-allowed ${variants[variant]} ${className}`}
+			className={`inline-flex min-h-10 items-center justify-center gap-2 rounded-lg px-4 py-2 text-sm font-medium transition disabled:cursor-not-allowed disabled:opacity-50 ${variants[variant]} ${className}`}
 		>
 			{loading && <Spinner className="h-4 w-4" />}
 			{children}
@@ -110,12 +110,12 @@ export function EmptyState({ title, subtitle, icon }: { title: string; subtitle?
 
 export function PageHeader({ title, subtitle, actions }: { title: string; subtitle?: string; actions?: ReactNode }) {
 	return (
-		<div className="mb-6 flex flex-wrap items-end justify-between gap-4">
+		<div className="mb-5 flex flex-wrap items-end justify-between gap-3 sm:mb-6 sm:gap-4">
 			<div>
-				<h1 className="text-2xl font-bold tracking-tight text-text">{title}</h1>
+				<h1 className="text-xl font-bold tracking-tight text-text sm:text-2xl">{title}</h1>
 				{subtitle && <p className="mt-1 text-sm text-muted">{subtitle}</p>}
 			</div>
-			{actions && <div className="flex gap-2">{actions}</div>}
+			{actions && <div className="flex w-full gap-2 sm:w-auto">{actions}</div>}
 		</div>
 	);
 }
diff --git a/UI/src/pages/Admin.tsx b/UI/src/pages/Admin.tsx
index 3fa789c..ffec633 100644
--- a/UI/src/pages/Admin.tsx
+++ b/UI/src/pages/Admin.tsx
@@ -20,12 +20,12 @@ export function AdminPage() {
 	return (
 		<div>
 			<PageHeader title="Admin" subtitle="Platform administration." />
-			<div className="mb-6 flex gap-1 border-b border-border">
+			<div className="mb-6 flex gap-1 overflow-x-auto border-b border-border">
 				{tabs.map((t) => (
 					<button
 						key={t.id}
 						onClick={() => setTab(t.id)}
-						className={`px-4 py-2 text-sm font-medium transition ${
+						className={`shrink-0 px-4 py-2 text-sm font-medium transition ${
 							tab === t.id ? "border-b-2 border-accent text-text" : "text-muted hover:text-text"
 						}`}
 					>
@@ -110,7 +110,7 @@ function UsersTab() {
 						</p>
 					</div>
 					{u.id !== me?.id && (
-						<div className="flex gap-2">
+						<div className="flex w-full flex-wrap gap-2 sm:w-auto sm:flex-nowrap">
 							<Button variant="ghost" onClick={() => setRole(u, u.role === "ADMIN" ? "USER" : "ADMIN")}>
 								{u.role === "ADMIN" ? "Demote" : "Promote"}
 							</Button>
@@ -178,7 +178,7 @@ function AgentsTab() {
 						</div>
 						{a.description && <p className="text-xs text-muted">{a.description}</p>}
 					</div>
-					<div className="flex gap-2">
+					<div className="flex w-full flex-wrap gap-2 sm:w-auto sm:flex-nowrap">
 						<Button variant="ghost" onClick={() => toggle(a)}>
 							{a.disabled ? "Enable" : "Disable"}
 						</Button>
@@ -211,14 +211,14 @@ function SettingsTab() {
 	if (!settings) return <Loader />;
 	return (
 		<div className="space-y-3">
-			<Card className="flex items-center justify-between p-5">
+			<Card className="flex flex-wrap items-center justify-between gap-4 p-4 sm:p-5">
 				<div>
 					<p className="font-medium text-text">Enable registration</p>
 					<p className="text-sm text-muted">Allow new humans to create accounts.</p>
 				</div>
 				<Toggle checked={settings.registration_enabled} onChange={(v) => update({ registration_enabled: v })} />
 			</Card>
-			<Card className="flex items-center justify-between p-5">
+			<Card className="flex flex-wrap items-center justify-between gap-4 p-4 sm:p-5">
 				<div>
 					<p className="font-medium text-text">Enable requests</p>
 					<p className="text-sm text-muted">Allow agents to submit new change requests platform-wide.</p>
@@ -251,14 +251,14 @@ function AuditTab() {
 		<div>
 			<div className="space-y-1.5">
 				{logs.map((l) => (
-					<Card key={l.id} className="flex items-center gap-3 p-3 text-sm">
+					<Card key={l.id} className="flex flex-wrap items-center gap-2 p-3 text-sm sm:flex-nowrap sm:gap-3">
 						<code className="rounded bg-surface-raised px-2 py-0.5 text-xs text-accent">{l.action}</code>
 						<span className="min-w-0 flex-1 truncate text-muted">
 							{l.actor ? `@${l.actor.username}` : "system"}
 							{l.target_type && ` → ${l.target_type}:${l.target_id}`}
 							{l.detail && ` · ${l.detail}`}
 						</span>
-						<span className="shrink-0 text-xs text-faint">{relativeTime(l.created_at)}</span>
+						<span className="w-full text-xs text-faint sm:w-auto sm:shrink-0">{relativeTime(l.created_at)}</span>
 					</Card>
 				))}
 			</div>
diff --git a/UI/src/pages/Dashboard.tsx b/UI/src/pages/Dashboard.tsx
index 9319ea3..6442f25 100644
--- a/UI/src/pages/Dashboard.tsx
+++ b/UI/src/pages/Dashboard.tsx
@@ -67,7 +67,7 @@ export function DashboardPage() {
 
 			<div className="grid gap-8 lg:grid-cols-3">
 				<div className="lg:col-span-2">
-					<div className="mb-3 flex items-center justify-between">
+					<div className="mb-3 flex items-center justify-between gap-3">
 						<h2 className="text-lg font-semibold">Awaiting review</h2>
 						<Link to="/requests" className="text-sm text-primary hover:underline">
 							View all →
@@ -89,7 +89,7 @@ export function DashboardPage() {
 				</div>
 
 				<div>
-					<div className="mb-3 flex items-center justify-between">
+					<div className="mb-3 flex items-center justify-between gap-3">
 						<h2 className="text-lg font-semibold">Agents</h2>
 						<Link to="/agents" className="text-sm text-primary hover:underline">
 							Manage →
@@ -128,7 +128,7 @@ function PendingRow({ request }: { request: ChangeRequest }) {
 					<div className="flex min-w-0 items-start gap-3">
 						<AgentAvatar name={request.agent?.name ?? "?"} iconUrl={request.agent?.icon_url} size={32} />
 						<div className="min-w-0">
-							<div className="flex items-center gap-2">
+							<div className="flex flex-wrap items-center gap-2">
 								<p className="truncate font-medium text-text">{request.title}</p>
 								{request.resubmitted && (
 									<span className="animate-pulse-ring rounded-full bg-changes/20 px-2 py-0.5 text-[10px] font-semibold text-changes">
diff --git a/UI/src/pages/Login.tsx b/UI/src/pages/Login.tsx
index 8961516..8061123 100644
--- a/UI/src/pages/Login.tsx
+++ b/UI/src/pages/Login.tsx
@@ -90,7 +90,7 @@ export function AuthShell({
 	children: React.ReactNode;
 }) {
 	return (
-		<div className="flex min-h-screen items-center justify-center p-4">
+		<div className="flex min-h-[100dvh] items-center justify-center p-3 sm:p-4">
 			<div className="w-full max-w-md">
 				<div className="mb-8 text-center">
 					<div className="mb-3 text-4xl">✅</div>
@@ -99,7 +99,7 @@ export function AuthShell({
 					</h1>
 					<p className="mt-2 text-sm text-muted">{subtitle}</p>
 				</div>
-				<Card className="p-6">
+				<Card className="p-4 sm:p-6">
 					<h2 className="mb-5 text-lg font-semibold">{title}</h2>
 					{children}
 				</Card>
diff --git a/UI/src/pages/RequestDetail.tsx b/UI/src/pages/RequestDetail.tsx
index c88e3f3..46237a5 100644
--- a/UI/src/pages/RequestDetail.tsx
+++ b/UI/src/pages/RequestDetail.tsx
@@ -76,11 +76,11 @@ export function RequestDetailPage() {
 			)}
 
 			<div className="grid gap-6 lg:grid-cols-3">
-				<div className="lg:col-span-2">
+				<div className="order-2 lg:order-1 lg:col-span-2">
 					<div className="mb-4 flex items-start justify-between gap-4">
 						<div>
 							<div className="flex flex-wrap items-center gap-2">
-								<h1 className="text-2xl font-bold tracking-tight">{request.title}</h1>
+								<h1 className="break-words text-xl font-bold tracking-tight sm:text-2xl">{request.title}</h1>
 								<StateBadge state={request.state} />
 							</div>
 							{request.description && <p className="mt-2 text-muted">{request.description}</p>}
@@ -102,7 +102,7 @@ export function RequestDetailPage() {
 					<ChangeList changes={request.changes} />
 				</div>
 
-				<div className="space-y-4">
+				<div className="order-1 space-y-4 lg:order-2">
 					{canDecide && (
 						<Card className="space-y-2 p-4">
 							<p className="mb-1 text-sm font-semibold">Your decision</p>
@@ -197,9 +197,9 @@ export function RequestDetailPage() {
 
 function Row({ label, value }: { label: string; value: React.ReactNode }) {
 	return (
-		<div className="flex items-start justify-between gap-3">
+		<div className="flex flex-col gap-1 sm:flex-row sm:items-start sm:justify-between sm:gap-3">
 			<span className="shrink-0 text-faint">{label}</span>
-			<span className="text-right text-text">{value}</span>
+			<span className="break-all text-text sm:text-right">{value}</span>
 		</div>
 	);
 }
diff --git a/UI/src/pages/Requests.tsx b/UI/src/pages/Requests.tsx
index 23465cc..c2229c2 100644
--- a/UI/src/pages/Requests.tsx
+++ b/UI/src/pages/Requests.tsx
@@ -60,13 +60,13 @@ export function RequestsPage() {
 		<div>
 			<PageHeader title="Requests" subtitle="Full history of change requests submitted by your agents." />
 
-			<div className="mb-4 flex flex-wrap items-center gap-2">
+			<div className="mb-4 flex flex-nowrap items-center gap-2 overflow-x-auto pb-1 sm:flex-wrap sm:pb-0">
 				<button
 					onClick={() => {
 						setStateFilter("");
 						setPage(1);
 					}}
-					className={`rounded-lg px-3 py-1.5 text-sm ${stateFilter === "" ? "bg-surface-raised text-text" : "text-muted hover:text-text"}`}
+					className={`shrink-0 rounded-lg px-3 py-2 text-sm ${stateFilter === "" ? "bg-surface-raised text-text" : "text-muted hover:text-text"}`}
 				>
 					All
 				</button>
@@ -77,7 +77,7 @@ export function RequestsPage() {
 							setStateFilter(s);
 							setPage(1);
 						}}
-						className={`rounded-lg px-3 py-1.5 text-sm ${stateFilter === s ? "bg-surface-raised text-text" : "text-muted hover:text-text"}`}
+						className={`shrink-0 rounded-lg px-3 py-2 text-sm ${stateFilter === s ? "bg-surface-raised text-text" : "text-muted hover:text-text"}`}
 					>
 						{s.replace("_", " ").toLowerCase()}
 					</button>
@@ -88,7 +88,7 @@ export function RequestsPage() {
 						setAgentFilter(e.target.value ? Number(e.target.value) : "");
 						setPage(1);
 					}}
-					className="ml-auto rounded-lg border border-border-strong bg-bg px-3 py-1.5 text-sm text-text outline-none"
+					className="sticky right-0 ml-auto shrink-0 rounded-lg border border-border-strong bg-bg px-3 py-2 text-sm text-text outline-none sm:static"
 				>
 					<option value="">All agents</option>
 					{agents.map((a) => (
@@ -125,7 +125,7 @@ export function RequestsPage() {
 										{relativeTime(r.created_at)}
 									</p>
 								</div>
-								<StateBadge state={r.state} />
+								<div className="shrink-0"><StateBadge state={r.state} /></div>
 							</Card>
 						</Link>
 					))}
diff --git a/UI/src/pages/Settings.tsx b/UI/src/pages/Settings.tsx
index b367693..e2cf2b4 100644
--- a/UI/src/pages/Settings.tsx
+++ b/UI/src/pages/Settings.tsx
@@ -9,7 +9,7 @@ import { CodeBlock } from "../components/CodeBlock";
 
 function Section({ title, description, children }: { title: string; description?: string; children: React.ReactNode }) {
 	return (
-		<Card className="p-5">
+		<Card className="p-4 sm:p-5">
 			<h2 className="text-base font-semibold text-text">{title}</h2>
 			{description && <p className="mb-4 mt-0.5 text-sm text-muted">{description}</p>}
 			<div className={description ? "" : "mt-4"}>{children}</div>
@@ -147,7 +147,7 @@ export function SettingsPage() {
 
 				<Section title="Two-factor authentication" description="Add a TOTP authenticator app for extra security.">
 					{user?.totp_enabled ? (
-						<div className="flex items-center justify-between">
+						<div className="flex flex-wrap items-center justify-between gap-3">
 							<span className="text-sm text-approved">✓ 2FA is enabled</span>
 							<Button variant="danger" onClick={() => setDisable2faOpen(true)}>
 								Disable