Remove pencil icon, use cursor-text to signal editable name

The hover-revealed pencil icon caused layout shift on rows with
conditions. Modern UIs (Figma, Notion, Linear) rely on double-click
without a visible edit icon. Replace with cursor-text on hover.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Lukas
2026-03-11 22:32:56 +01:00
parent 2d8e823eff
commit 96a7b2d00e
2 changed files with 8 additions and 23 deletions

View File

@@ -3,7 +3,7 @@ import {
type ConditionId,
deriveHpStatus,
} from "@initiative/domain";
import { Brain, Pencil, X } from "lucide-react";
import { Brain, X } from "lucide-react";
import { type Ref, useCallback, useEffect, useRef, useState } from "react";
import { cn } from "../lib/utils";
import { AcShield } from "./ac-shield";
@@ -138,21 +138,10 @@ function EditableName({
onTouchEnd={cancelLongPress}
onTouchCancel={cancelLongPress}
onTouchMove={cancelLongPress}
className="truncate text-left text-sm text-foreground hover:text-hover-neutral transition-colors"
className="truncate text-left text-sm text-foreground cursor-text hover:text-hover-neutral transition-colors"
>
{name}
</button>
<button
type="button"
onClick={(e) => {
e.stopPropagation();
startEditing();
}}
aria-label="Edit name"
className="hidden shrink-0 items-center text-muted-foreground hover:text-hover-neutral group-hover:inline-flex"
>
<Pencil size={14} />
</button>
</>
);
}