UI/src/pages/Dashboard.tsx

@@ -124,12 +124,12 @@ function PendingRow({ request }: { request: ChangeRequest }) {
 	return (
 		<Link to={`/requests/${request.request_id}`} className="block">
 			<Card className="p-4 transition hover:border-border-strong hover:bg-surface-raised/40">
-				<div className="flex items-start justify-between gap-3">
+				<div className="flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between sm:gap-3">
 					<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 flex-wrap items-center gap-2">
-								<p className="truncate font-medium text-text">{request.title}</p>
+								<p className="break-words 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">
 										UPDATED
@@ -142,7 +142,7 @@ function PendingRow({ request }: { request: ChangeRequest }) {
 							</p>
 						</div>
 					</div>
-					<div className="flex shrink-0 flex-col items-end gap-1">
+					<div className="flex self-start sm:shrink-0 sm:flex-col sm:items-end sm:gap-1">
 						<StateBadge state={request.state} />
 						<span className={`text-[11px] ${exp.urgent ? "text-pending" : "text-faint"}`}>{exp.text}</span>
 					</div>