Skip to content

artifact-canvas: '+' affordance disappears while mouse travels toward it; also undersized vs prose font #1236

Description

@amrmelsayed

Bug 1: the affordance vanishes en route (hover-geometry defect)

The "+" add-comment button intermittently disappears exactly as the user mouses toward it. Two mechanisms, both confirmed in source:

  1. Re-anchoring en route. The overlay is anchored to the hovered block's FIRST line (overlayTop = el.offsetTop + lineHeight/2, ArtifactCanvas.tsx:activateFromTarget) at the far-left gutter. Traveling diagonally from mid-block (or a neighboring block) toward it crosses other [data-line] blocks, and every crossing re-fires activateFromTarget → the "+" instantly re-anchors to the newly crossed block, jumping away from the pointer. Path-geometry-dependent, hence intermittent.
  2. Overshoot dismissal. The overlay hugs left: 0 of the canvas; onMouseLeave on the outer canvas clears activeLine instantly (no grace). Overshooting one pixel past the canvas's left edge unmounts the button under the cursor.

(Crossing the gutter itself is safe — the body's padding-left: 1.9rem belongs to the body, and activateFromTarget early-returns on no-[data-line] without clearing.)

Fix direction

  • Dismiss/re-anchor grace (~200ms timer on both onMouseLeave-clear and block-crossing re-anchor), canceled when the pointer enters the overlay.
  • Pin while targeted: onMouseEnter on .codev-canvas-overlay pins activeLine so nothing re-anchors out from under the cursor.
  • Optional deeper alternative if the gutter remains troublesome: move the "+" into the block's own hover row (the GitHub-diff pattern), which eliminates the travel gap class entirely.

Bug 2: the button is undersized relative to the prose

The button visually reads smaller than the markdown base font. Mechanism (deliberate-looking but wrong for this element): the token comment at default-theme.css:93-96 notes the overlay "+", cards, and minimap chrome live OUTSIDE the font-sized containers — so the button never inherits --codev-canvas-font-size (16px) and renders at the host default (13px in VS Code webviews), further shrunk by line-height: 1; padding: 0 6px.

Fix direction

  • Apply font-size: var(--codev-canvas-font-size) to .codev-canvas-overlay (or the button), and give the button a minimum hit target of ~24×24px (WCAG 2.5.8 target-size floor) via padding/min-width/min-height.
  • The 1.9rem (~30px) gutter accommodates a ~24px button without layout change; verify the translateY(-50%) centering still aligns with the block's first line at the new size.

The two bugs compound: a small target demands precise travel, and precise travel maximizes exposure to the re-anchor/overshoot dismissal. Fixing either helps; fix both.

Scope

ArtifactCanvas.tsx (hover state machine) + default-theme.css (sizing) + interaction tests. BUGFIX-scoped.

Metadata

Metadata

Assignees

No one assigned

    Labels

    area/vscodeArea: VS Code extension

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions