fix(web): move chat minimap away from sidebar - #8347
Conversation
|
Important Review skippedAuto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Repository UI Review profile: CHILL Plan: Pro Plus Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
Comment |
github-actions
Bot
added
vouch:unvouched
![macroscopeapp[bot]](https://avatars.githubusercontent.com/in/900172?s=60&v=4){kind=small}
There was a problem hiding this comment.
Reviewed the minimap side flip against the chat column's right-edge occupants. The move fixes the left-edge SidebarRail conflict but lands the minimap on top of two existing right-edge owners (the timeline's native scrollbar lane and the floating preview mini player), so the pointer-event collision is traded rather than removed. Two findings inline.
Posted via Macroscope — UI Consistency
| aria-label={`Jump to message: ${activeItem?.userText ?? "User message"}`} | ||
| className={cn( | ||
| "absolute top-1/2 left-3 -translate-y-1/2 cursor-pointer bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/70", | ||
| "absolute top-1/2 right-3 -translate-y-1/2 cursor-pointer bg-transparent focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/70", |
There was a problem hiding this comment.
right-3 reuses the left-edge inset (TIMELINE_MINIMAP_HIT_STRIP_INSET = 12) in a lane that already belongs to the native scrollbar: the list is scrollbar-gutter-both and --app-scrollbar-width is 6px, so the scroll thumb occupies the rightmost 6px and only 6px of clearance remains before a 40px jump target that expands to 22rem on hover. Reaching for the thumb now crosses the strip, so the 20rem preview card pops over the message text, and a mousedown that misses the thumb by a few pixels is swallowed (onMouseDown calls preventDefault) and turns into a jump-to-message on click — the scroll thumb stops being reliably grabbable. If the minimap stays on the right, the inset should clear the scrollbar lane explicitly (scrollbar width + the current 12px, applied both to the right-* class and to the value resolveTimelineMinimapHitStripWidth subtracts) instead of inheriting the left-edge number.
Posted via Macroscope — UI Consistency
| <div | ||
| className={cn( | ||
| "group/minimap pointer-events-none absolute inset-y-0 left-0 z-40 hidden w-18 [@media(pointer:fine)]:block", | ||
| "group/minimap pointer-events-none absolute inset-y-0 right-0 z-40 hidden w-18 [@media(pointer:fine)]:block", |
There was a problem hiding this comment.
Anchoring the overlay to right-0 puts it on top of the floating preview mini player, which defaults to the chat column's top-right (right: PREVIEW_MINI_PLAYER_EDGE_GAP = 12px, 320x200, and is freely draggable — preview/ThreadPreviewMiniPlayer.tsx). Both live in the same chat-column stacking context (ChatView.tsx renders the mini player as a sibling of the messages wrapper, and neither relative wrapper sets a z-index), so this z-40 root paints above the player's drag/close cluster (z-[34]) and resize grip (z-[33]). Wherever the two overlap vertically — long threads, where the strip height saturates at calc(100vh - 18rem), or any position the player is dragged to — the minimap's pointer-events-auto strip wins the hit test: hovering the player's right 40px opens the minimap preview and a click jumps the timeline instead of resizing or dragging the player. While the preview is open the strip is 22rem wide, i.e. wider than the player itself, so the whole player is shadowed in that band. Smallest fix: keep the minimap on the left and inset it past SidebarRail (the element that actually causes the sidebar hover conflict), or, if it must move right, suppress the strip's pointer events while a mini player occupies the right edge.
Posted via Macroscope — UI Consistency
ApprovabilityVerdict: Approved at Macroscope's review found this PR approvable — This is a small, self-contained chat UI fix that moves the existing minimap and all related interaction elements to the right gutter while preserving gutter sizing and navigation behavior. A regression test covers the new placement, and no broader production, schema, or infrastructure behavior is changed. You can add or adjust custom eligibility rules. Learn more. |
|
Note 🤖 GPT-5.6 Sol responding on behalf of Theo We're closing this PR as we clean up the T3 Code backlog. Thank you for taking the time to put this together. Closing this minimap placement change from the current backlog. The pointer-crossing problem is useful evidence, but moving the whole minimap to the other gutter is a layout preference with other navigation effects. Keep that reproduction and the existing gutter bounds for the next minimap interaction review. If you believe we closed this in error, please reopen the PR and leave a comment explaining what we missed. If GitHub does not let you reopen it, leave a comment here and we'll take another look. |
2 participants
Problem
The chat minimap currently sits in the left gutter, directly between the sidebar and the conversation. Moving the pointer from the sidebar into chat crosses its hover target and can unintentionally expand the minimap preview, distracting the user during ordinary navigation.
Fix
Move the minimap rail, markers, hover target, and preview into the right gutter. Keep the existing gutter-width calculation so the interactive strip remains clear of message content at narrow widths and under browser zoom.
Add a render regression test that requires right-edge placement and rejects the previous left-edge class.
Testing
vp test run apps/web/src/components/chat/MessagesTimeline.test.tsx(33 tests passed)Generated with GPT-5.6-Sol via the Codex harness.
Note
Low Risk
Localized chat UI positioning and naming; gutter math and pointer-event safeguards are preserved.
Overview
Moves the user-message timeline minimap from the left gutter to the right gutter so pointer travel from the sidebar into chat no longer crosses the minimap hover strip and accidentally opens the preview.
Layout updates mirror the rail on the right: container
right-0, hit target and vertical line atright-3, markers anchoredright-0, and preview atright-8. Gutter capping is unchanged—resolveTimelineMinimapHitStripWidthstill limits the interactive strip to the side gutter; the constant is renamed toTIMELINE_MINIMAP_HIT_STRIP_INSETand docs now describe the right edge.Adds a regression test that expects
absolute inset-y-0 right-0and rejects left-edge placement.Reviewed by Cursor Bugbot for commit 3fc989c. Bugbot is set up for automated code reviews on this repo. Configure here.
Note
Move
TimelineMinimapfrom left edge to right edge of viewportThe minimap overlapped the sidebar on the left edge. It now renders on the right edge instead — all positioning classes, the interactive button anchor, the vertical guideline, strip markers, and the preview tooltip are flipped from left to right in MessagesTimeline.tsx. The
TIMELINE_MINIMAP_HIT_STRIP_LEFTconstant is renamed toTIMELINE_MINIMAP_HIT_STRIP_INSETto reflect the neutral inset meaning, and a test confirms the right-side placement.Macroscope summarized 3fc989c.