fix(chat-checkpoint-marker): close hover-bridge gap so Rewind/Fork stay reachable#468
Merged
Merged
Conversation
…chable
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) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The Rewind / Fork pill on checkpoint markers (visible on hover of the gutter dot) was unclickable: the pill would flicker out before the cursor reached it.
Root cause
The pill is positioned at `left: 18px` from the 10px-wide dot, with a pure-CSS `:hover` toggle. The 8px gap between dot's right edge and pill's left edge is dead space — neither element is hovered during traversal, so the pill hides immediately when the cursor leaves the dot.
Fix
Add a 10px-wide invisible `::before` pseudo-element on the pill that extends leftward to meet the dot. The cursor stays inside the pill's hover region for the whole traversal.
Files
Test plan
🤖 Generated with Claude Code