From 27ff8ba1adb8c9575546809c7cc3087c8dfef1d8 Mon Sep 17 00:00:00 2001 From: Lukas Date: Wed, 25 Mar 2026 00:19:47 +0100 Subject: [PATCH] Collapse hover-only buttons to zero width when hidden Edit and add-condition buttons now take no space when not hovered, eliminating the gap between name and condition icons. They slide in smoothly on hover with a 150ms transition. Co-Authored-By: Claude Opus 4.6 (1M context) --- apps/web/src/components/combatant-row.tsx | 2 +- apps/web/src/components/condition-tags.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/src/components/combatant-row.tsx b/apps/web/src/components/combatant-row.tsx index c627e8d..a29f47c 100644 --- a/apps/web/src/components/combatant-row.tsx +++ b/apps/web/src/components/combatant-row.tsx @@ -112,7 +112,7 @@ function EditableName({ onClick={startEditing} title="Rename" aria-label="Rename" - className="inline-flex shrink-0 items-center rounded p-0.5 text-muted-foreground opacity-0 pointer-coarse:opacity-100 transition-colors transition-opacity hover:bg-hover-neutral-bg hover:text-hover-neutral focus:opacity-100 group-hover:opacity-100" + className="inline-flex pointer-coarse:w-auto w-0 shrink-0 items-center overflow-hidden pointer-coarse:overflow-visible rounded p-0.5 text-muted-foreground opacity-0 pointer-coarse:opacity-100 transition-all duration-150 hover:bg-hover-neutral-bg hover:text-hover-neutral focus:w-auto focus:overflow-visible focus:opacity-100 group-hover:w-auto group-hover:overflow-visible group-hover:opacity-100" > diff --git a/apps/web/src/components/condition-tags.tsx b/apps/web/src/components/condition-tags.tsx index 0ef51f7..e691c80 100644 --- a/apps/web/src/components/condition-tags.tsx +++ b/apps/web/src/components/condition-tags.tsx @@ -103,7 +103,7 @@ export function ConditionTags({ type="button" title="Add condition" aria-label="Add condition" - className="inline-flex items-center rounded p-0.5 text-muted-foreground opacity-0 pointer-coarse:opacity-100 transition-colors transition-opacity hover:bg-hover-neutral-bg hover:text-hover-neutral focus:opacity-100 group-hover:opacity-100" + className="inline-flex pointer-coarse:w-auto w-0 items-center overflow-hidden pointer-coarse:overflow-visible rounded p-0.5 text-muted-foreground opacity-0 pointer-coarse:opacity-100 transition-all duration-150 hover:bg-hover-neutral-bg hover:text-hover-neutral focus:w-auto focus:overflow-visible focus:opacity-100 group-hover:w-auto group-hover:overflow-visible group-hover:opacity-100" onClick={(e) => { e.stopPropagation(); onOpenPicker();