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