From 6bb6d47bc81362091e457d123de5c01e5d8dc23f Mon Sep 17 00:00:00 2001 From: Brian Love Date: Tue, 19 May 2026 10:15:35 -0700 Subject: [PATCH] fix(chat-checkpoint-marker): close hover-bridge gap so pill stays reachable MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The Rewind / Fork pill is positioned absolutely at left:18px relative to the dot, with a CSS-only `:hover` toggle: .chat-checkpoint-marker__dot:hover + .chat-checkpoint-marker__pill, .chat-checkpoint-marker__pill:hover { display: inline-flex } The 10px-wide dot ends at 10px; the pill starts at 18px — an 8px visual gap. When the user moves the cursor from the dot toward the pill they traverse that gap, during which NEITHER element is hovered. The CSS toggle fires immediately, hiding the pill before the cursor ever reaches it. Result: Rewind / Fork are visible but unclickable. Fix: add a 10px-wide invisible `::before` pseudo-element on the pill that extends leftward to meet the dot's right edge. The cursor stays inside the pill's hover region throughout the traversal, so the pill stays open. No JS, no behavioral change. Coarse-pointer (touch) path is unaffected — that uses a tap-driven `data-open` toggle instead of :hover. Co-Authored-By: Claude Opus 4.7 (1M context) --- .../chat-checkpoint-marker.component.ts | 14 ++++++++++++++ 1 file changed, 14 insertions(+) diff --git a/libs/chat/src/lib/primitives/chat-checkpoint-marker/chat-checkpoint-marker.component.ts b/libs/chat/src/lib/primitives/chat-checkpoint-marker/chat-checkpoint-marker.component.ts index 0e81c266..70345d89 100644 --- a/libs/chat/src/lib/primitives/chat-checkpoint-marker/chat-checkpoint-marker.component.ts +++ b/libs/chat/src/lib/primitives/chat-checkpoint-marker/chat-checkpoint-marker.component.ts @@ -52,6 +52,20 @@ import { CHAT_HOST_TOKENS } from '../../styles/chat-tokens'; font-size: 11px; z-index: 5; } + /* Invisible hover-bridge: a 10px-wide pseudo-element bridges the visual + gap between the 10px dot and the pill (which sits at left:18px). Without + it, the user's cursor crosses 8px of dead space while moving toward the + pill — neither dot nor pill is hovered during that traversal, and the + pill flickers off before the cursor reaches it. The bridge is created + on the pill itself so the same :hover chain keeps the pill open. */ + .chat-checkpoint-marker__pill::before { + content: ''; + position: absolute; + left: -10px; + top: 0; + bottom: 0; + width: 10px; + } .chat-checkpoint-marker__dot:hover + .chat-checkpoint-marker__pill, .chat-checkpoint-marker__dot:focus-visible + .chat-checkpoint-marker__pill, .chat-checkpoint-marker__pill:hover {