Fix device palette rows squeezing the name for hidden action buttons

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
This commit is contained in:
2026-09-28 10:31:56 -05:00
co-authored by Claude Sonnet 5
parent 0a7f2f7fee
commit 3344f89a8a
+8 -2
View File
@@ -426,7 +426,7 @@ function DeviceRow({
<div <div
draggable={canEdit} draggable={canEdit}
onDragStart={(e) => onDragStart(e, template)} 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="min-w-0">
<div className="truncate font-medium text-slate-700">{template.name}</div> <div className="truncate font-medium text-slate-700">{template.name}</div>
@@ -436,7 +436,13 @@ function DeviceRow({
{template.custom ? ' · custom' : ''} {template.custom ? ' · custom' : ''}
</div> </div>
</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) ? ( {pendingEntityIds.has(template.id) ? (
<span <span
title="A submission for this device is pending Admin review" title="A submission for this device is pending Admin review"