From 91177230d7e0c5b981e59fa718c3f801e44c10b9 Mon Sep 17 00:00:00 2001
From: luna <clawy@reversed.dev>
Date: Wed, 22 Jul 2026 20:48:47 +0000
Subject: [PATCH] fix(ui): fit request controls and titles on mobile

---
 UI/src/components/Layout.tsx | 24 ++++++++++++++----------
 UI/src/pages/Requests.tsx    | 27 ++++++++++++++++++++++-----
 2 files changed, 36 insertions(+), 15 deletions(-)

diff --git a/UI/src/components/Layout.tsx b/UI/src/components/Layout.tsx
index f8e9695..4536a69 100644
--- a/UI/src/components/Layout.tsx
+++ b/UI/src/components/Layout.tsx
@@ -80,13 +80,22 @@ export function Layout({ children }: { children: ReactNode }) {
 									>
 										Settings
 									</Link>
-									<Link
-										to="/notifications"
+								<Link
+									to="/notifications"
 										className="block px-4 py-2 text-sm text-muted hover:bg-surface-raised hover:text-text md:hidden"
 										onClick={() => setMenuOpen(false)}
+								>
+									Notifications
+								</Link>
+								{user?.role === "ADMIN" && (
+									<Link
+										to="/admin"
+										className="block px-4 py-2 text-sm text-accent hover:bg-surface-raised"
+										onClick={() => setMenuOpen(false)}
 									>
-										Notifications
+										Admin
 									</Link>
+								)}
 									<button
 										onClick={async () => {
 											await logout();
@@ -102,14 +111,14 @@ export function Layout({ children }: { children: ReactNode }) {
 					</div>
 				</div>
 				{/* mobile nav */}
-				<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">
+				<nav className="flex items-center justify-between gap-1 border-t border-border px-3 py-2 md:hidden sm:px-4">
 					{navItems.map((item) => (
 						<NavLink
 							key={item.to}
 							to={item.to}
 							end={item.end}
 							className={({ isActive }) =>
-								`whitespace-nowrap rounded-lg px-3 py-1.5 text-sm font-medium ${
+								`whitespace-nowrap rounded-lg px-2 py-1.5 text-sm font-medium ${
 									isActive ? "bg-surface-raised text-text" : "text-muted"
 								}`
 							}
@@ -117,11 +126,6 @@ export function Layout({ children }: { children: ReactNode }) {
 							{item.label}
 						</NavLink>
 					))}
-					{user?.role === "ADMIN" && (
-						<NavLink to="/admin" className="whitespace-nowrap rounded-lg px-3 py-1.5 text-sm text-accent">
-							Admin
-						</NavLink>
-					)}
 				</nav>
 			</header>
 
diff --git a/UI/src/pages/Requests.tsx b/UI/src/pages/Requests.tsx
index c2229c2..3e4e509 100644
--- a/UI/src/pages/Requests.tsx
+++ b/UI/src/pages/Requests.tsx
@@ -60,7 +60,21 @@ export function RequestsPage() {
 		<div>
 			<PageHeader title="Requests" subtitle="Full history of change requests submitted by your agents." />
 
-			<div className="mb-4 flex flex-nowrap items-center gap-2 overflow-x-auto pb-1 sm:flex-wrap sm:pb-0">
+			<div className="mb-4 flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
+				<select
+					value={stateFilter}
+					onChange={(e) => {
+						setStateFilter(e.target.value as RequestState | "");
+						setPage(1);
+					}}
+					className="w-full rounded-lg border border-border-strong bg-bg px-3 py-2 text-sm text-text outline-none sm:hidden"
+				>
+					<option value="">All states</option>
+					{STATES.map((s) => (
+						<option key={s} value={s}>{s.replace("_", " ").toLowerCase()}</option>
+					))}
+				</select>
+				<div className="hidden sm:contents">
 				<button
 					onClick={() => {
 						setStateFilter("");
@@ -82,13 +96,14 @@ export function RequestsPage() {
 						{s.replace("_", " ").toLowerCase()}
 					</button>
 				))}
+				</div>
 				<select
 					value={agentFilter}
 					onChange={(e) => {
 						setAgentFilter(e.target.value ? Number(e.target.value) : "");
 						setPage(1);
 					}}
-					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"
+					className="w-full rounded-lg border border-border-strong bg-bg px-3 py-2 text-sm text-text outline-none sm:ml-auto sm:w-auto"
 				>
 					<option value="">All agents</option>
 					{agents.map((a) => (
@@ -109,11 +124,12 @@ export function RequestsPage() {
 				<div className="space-y-2">
 					{items.map((r) => (
 						<Link key={r.request_id} to={`/requests/${r.request_id}`} className="block">
-							<Card className="flex items-center gap-3 p-3.5 transition hover:border-border-strong hover:bg-surface-raised/40">
+							<Card className="flex flex-col gap-2 p-3.5 transition hover:border-border-strong hover:bg-surface-raised/40 sm:flex-row sm:items-center sm:gap-3">
+								<div className="flex min-w-0 items-start gap-3">
 								<AgentAvatar name={r.agent?.name ?? "?"} iconUrl={r.agent?.icon_url} size={32} />
 								<div className="min-w-0 flex-1">
 									<div className="flex items-center gap-2">
-										<p className="truncate font-medium text-text">{r.title}</p>
+										<p className="break-words font-medium text-text">{r.title}</p>
 										{r.resubmitted && r.state === "PENDING" && (
 											<span className="rounded-full bg-changes/20 px-1.5 py-0.5 text-[10px] font-semibold text-changes">
 												UPDATED
@@ -125,7 +141,8 @@ export function RequestsPage() {
 										{relativeTime(r.created_at)}
 									</p>
 								</div>
-								<div className="shrink-0"><StateBadge state={r.state} /></div>
+								</div>
+								<div className="self-start sm:shrink-0"><StateBadge state={r.state} /></div>
 							</Card>
 						</Link>
 					))}