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:
- 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.
- 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.
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:
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-firesactivateFromTarget→ the "+" instantly re-anchors to the newly crossed block, jumping away from the pointer. Path-geometry-dependent, hence intermittent.left: 0of the canvas;onMouseLeaveon the outer canvas clearsactiveLineinstantly (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.9rembelongs to the body, andactivateFromTargetearly-returns on no-[data-line]without clearing.)Fix direction
onMouseLeave-clear and block-crossing re-anchor), canceled when the pointer enters the overlay.onMouseEnteron.codev-canvas-overlaypinsactiveLineso nothing re-anchors out from under the cursor.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-96notes 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 byline-height: 1; padding: 0 6px.Fix direction
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.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.