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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user