fix(web): scope timeline minimap hover target to the side gutter

[xxashxx-svg]

Fixes #3702

What

At non-default zoom (Cmd+Plus a few times) or at normal zoom with a wide sidebar / narrow window, the timeline minimap's hover target extends into the message text area: hovering body text triggers the minimap preview popover, the Copy button next to the timestamp can't appear, and text selection fights an invisible overlay.

Why it happens

The minimap is absolute left-0 on the full-width timeline viewport with a fixed hit strip (left-3 w-10, i.e. x = 12–52px) — and its w-18 wrapper is pointer-events-auto too, so the interactive region is really the leftmost ~72px. Meanwhile the message column is centered (max-w-3xl), so the side gutter between the viewport edge and the text is (viewportWidth − 768) / 2. Zooming in shrinks the effective CSS viewport width, and a wide sidebar shrinks the pane — both collapse that gutter toward zero while the fixed-px overlay stays put, landing it on top of the text. The pointer hit-test (resolveTimelineMinimapIndexFromPointer) only bounds the Y axis, so nothing stops it.

The Copy-button symptom is the same mechanism: the overlay swallows the pointer, so the message row's .group never enters :hover and group-hover:opacity-100 on the action row never fires.

Change

• New pure helper resolveTimelineMinimapHitStripWidth(viewportWidth) in MessagesTimeline.logic.ts (same shape/placement as the existing resolveTimelineMinimapHasPersistentGutter): caps the strip's width to what actually fits between the viewport edge and the content column; returns 0 when there's no usable gutter.
• The strip <button> takes that measured width (wide layouts keep the exact 40px they have today) and goes pointer-events-none at width 0.
• The w-18 wrapper is now pointer-events-none, so only the width-capped strip captures the pointer. Hover-reveal still works — hovering the strip puts its ancestors in :hover, which is what the wrapper's hover:opacity-100 keys off — but it's now correctly scoped to the gutter. Keyboard navigation (focus + arrows) is unaffected.

Measurement reuses the existing ResizeObserver on the timeline viewport — no new observers or listeners.

Tests

Extended the existing logic-function test with the new helper: no-gutter (768/792 → 0, inert), partial gutter (820 → 14px strip), full gutter (872/1400 → 40px, today's behavior), and degenerate inputs. vp check and vp run typecheck pass; the full MessagesTimeline suite (12 tests) passes.

🤖 Generated with Claude Code

---

Note

Low Risk
Localized chat UI pointer-event and layout logic with pure helpers and unit tests; no auth, data, or API changes.

Overview
Fixes the timeline minimap stealing pointer events over message text when zoom, a wide sidebar, or a narrow pane shrinks the side gutter while the hit area stayed a fixed ~40px wide.

Adds resolveTimelineMinimapHitStripWidth and resolveTimelineMinimapInteractiveWidth so the hover strip width tracks available gutter space (0 when there is no gutter, up to 40px when there is). The existing viewport ResizeObserver feeds that width into TimelineMinimap.

The minimap shell is pointer-events-none; only the gutter-capped strip is interactive when width > 0. With a preview open, the interactive region widens to 22rem so the popover stays usable. Preview content is select-text with data-minimap-preview, and clicks there no longer trigger jump-to-message.

^{Reviewed by Cursor Bugbot for commit c38df6f. Bugbot is set up for automated code reviews on this repo. Configure here.}

Note

Scope timeline minimap hover target to the side gutter width

• The minimap hit strip now dynamically computes its width based on the available side gutter (viewport width minus capped content width), going fully inert when no gutter exists.
• When a preview is open, the interactive area expands to a fixed 22rem; otherwise it stays narrow and gutter-capped.
• Events targeting the preview bubble are ignored by minimap button handlers, so text in the preview can be selected without triggering minimap actions.
• Behavioral Change: the minimap is now non-interactive on narrow viewports where no side gutter exists.

📊 Macroscope summarized c38df6f. 2 files reviewed, 0 issues evaluated, 0 issues filtered, 0 comments posted

🗂️ Filtered Issues

No issues evaluated.

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: b3ff4bbc-1a2e-44cf-9356-9903f2862015

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[macroscopeapp]

Approvability

Verdict: Needs human review

1 blocking correctness issue found. An unresolved review comment identifies a potential bug where the expanded hit strip width applies to the full-height button, causing it to intercept pointer events from message text - contradicting the PR's stated goal of scoping hover targets to the side gutter.

^{You can customize Macroscope's approvability policy. Learn more.}

[macroscopeapp]

🟡 Medium chat/MessagesTimeline.tsx:744

When activeItem becomes non-null, the button width expands to the full expanded hit strip width for its entire height, and that whole rectangle stays pointer-events-auto. Moving the pointer over message text within that expanded area still hits the button, and onMouseMove keeps repositioning the active preview instead of letting the underlying message row receive hover/selection. The intent of this change is to keep only the preview (and the narrow gutter leading to it) interactive, so consider applying pointer-events-auto and the expanded width only to the preview strip, not the full-height button.

🤖 Copy this AI Prompt to have your agent fix this:

In file @apps/web/src/components/chat/MessagesTimeline.tsx around line 744:

When `activeItem` becomes non-null, the button width expands to the full expanded hit strip width for its entire height, and that whole rectangle stays `pointer-events-auto`. Moving the pointer over message text within that expanded area still hits the button, and `onMouseMove` keeps repositioning the active preview instead of letting the underlying message row receive hover/selection. The intent of this change is to keep only the preview (and the narrow gutter leading to it) interactive, so consider applying `pointer-events-auto` and the expanded width only to the preview strip, not the full-height button.