feat(ui): improve mobile browser support

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>
 	);
 }