From bf9d101be87925da9ea8953b741476239faaceba Mon Sep 17 00:00:00 2001
From: enricobuehler <buehler@unom.io>
Date: Wed, 29 Jul 2026 21:32:22 +0200
Subject: [PATCH] fix(web): the approve button stops hiding off-canvas on
 portrait phones

The pending-devices table's four p-card cells overflow a 360-430 px
viewport, and the actions cell - Approve - ended up past the right edge
of an overflow-auto wrapper inside the page's overflow-x-hidden column:
the button existed but could not be seen or reached (landscape is wide
enough, which is why it "worked" there). The name cell now flexes and
truncates, and the fingerprint/age columns collapse into a sub-line
under the name on narrow screens instead of widening the row.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
---
 web/src/sections/Pairing/PendingDevices.tsx | 22 +++++++++++++++++----
 1 file changed, 18 insertions(+), 4 deletions(-)

diff --git a/web/src/sections/Pairing/PendingDevices.tsx b/web/src/sections/Pairing/PendingDevices.tsx
index 76dc3aea..a6141505 100644
--- a/web/src/sections/Pairing/PendingDevices.tsx
+++ b/web/src/sections/Pairing/PendingDevices.tsx
@@ -100,14 +100,28 @@ export const PendingDevices: FC<{
 						<TableBody>
 							{rows.map((p) => (
 								<TableRow className="h-18" key={p.id}>
-									<TableCell className="font-medium">{p.name}</TableCell>
-									<TableCell className="font-mono text-xs text-muted-foreground">
+									{/* The row must keep the actions on-canvas in a portrait phone
+									    viewport: the name flexes and truncates (w-full + max-w-0),
+									    and the fingerprint/age columns collapse into a sub-line
+									    here below md/sm instead of widening the row past the
+									    screen (the table wrapper scrolls, the page doesn't — an
+									    off-canvas Approve button is unreachable on mobile). */}
+									<TableCell className="w-full max-w-0 font-medium">
+										<div className="truncate">{p.name}</div>
+										<div className="truncate font-mono text-xs font-normal text-muted-foreground md:hidden">
+											{p.fingerprint.slice(0, 16)}…
+											<span className="ml-2 font-sans sm:hidden">
+												{fmtAge(p.age_secs)}
+											</span>
+										</div>
+									</TableCell>
+									<TableCell className="hidden font-mono text-xs text-muted-foreground md:table-cell">
 										{p.fingerprint.slice(0, 16)}…
 									</TableCell>
-									<TableCell className="text-xs text-muted-foreground">
+									<TableCell className="hidden text-xs text-muted-foreground sm:table-cell">
 										{fmtAge(p.age_secs)}
 									</TableCell>
-									<TableCell className="text-right">
+									<TableCell className="whitespace-nowrap text-right">
 										<div className="flex justify-end gap-2">
 											<Button
 												size="sm"