From 3344f89a8a8af3dfbedcdeff931d15fa74a61a22 Mon Sep 17 00:00:00 2001
From: aarbit <aarbit@gmail.com>
Date: Mon, 28 Sep 2026 10:31:56 -0500
Subject: [PATCH] Fix device palette rows squeezing the name for hidden action
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hover-reveal button row used opacity, not display, so it always
reserved its full width even while invisible — squeezing long names down
to a few characters at rest, worst for an Admin's 5-button rows. Switched
to hidden/group-hover:flex so idle rows show the full name, and made the
row flex-wrap so a crowded button set drops to its own line on hover
instead of squeezing the name further.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_017DUU6CnxECCDeqDNYJgr5x
---
 src/components/palette/DevicePalette.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/palette/DevicePalette.tsx b/src/components/palette/DevicePalette.tsx
index 078b4f5..32275d1 100644
--- a/src/components/palette/DevicePalette.tsx
+++ b/src/components/palette/DevicePalette.tsx
@@ -426,7 +426,7 @@ function DeviceRow({
       <div
         draggable={canEdit}
         onDragStart={(e) => onDragStart(e, template)}
-        className={`flex items-center justify-between rounded border border-slate-200 bg-white px-2 py-1.5 text-xs shadow-sm ${canEdit ? 'cursor-grab active:cursor-grabbing' : ''}`}
+        className={`flex flex-wrap items-center gap-y-1 rounded border border-slate-200 bg-white px-2 py-1.5 text-xs shadow-sm ${canEdit ? 'cursor-grab active:cursor-grabbing' : ''}`}
       >
         <div className="min-w-0">
           <div className="truncate font-medium text-slate-700">{template.name}</div>
@@ -436,7 +436,13 @@ function DeviceRow({
             {template.custom ? ' · custom' : ''}
           </div>
         </div>
-        <div className="ml-2 flex shrink-0 items-center gap-1 opacity-0 group-hover:opacity-100">
+        {/* `hidden`, not `opacity-0`, so the row's idle width isn't reserved
+            for buttons nobody's hovering to see — that reserved space was
+            squeezing long names down to almost nothing even at rest. Once
+            shown, `flex-wrap` on the row lets a crowded set (e.g. an Admin's
+            5 buttons) drop to its own line under the name instead of
+            squeezing it further. */}
+        <div className="ml-auto hidden shrink-0 items-center gap-1 group-hover:flex">
           {pendingEntityIds.has(template.id) ? (
             <span
               title="A submission for this device is pending Admin review"