diff --git a/apps/web/src/components/chat/MessagesTimeline.logic.ts b/apps/web/src/components/chat/MessagesTimeline.logic.ts index d398583430f5..ff5bfbc8bbd7 100644 --- a/apps/web/src/components/chat/MessagesTimeline.logic.ts +++ b/apps/web/src/components/chat/MessagesTimeline.logic.ts @@ -108,12 +108,12 @@ export function resolveTimelineMinimapHasPersistentGutter(viewportWidth: number) return sideGutter >= TIMELINE_MINIMAP_PERSISTENT_GUTTER; } -export const TIMELINE_MINIMAP_HIT_STRIP_LEFT = 12; +export const TIMELINE_MINIMAP_HIT_STRIP_INSET = 12; export const TIMELINE_MINIMAP_HIT_STRIP_MAX_WIDTH = 40; export const TIMELINE_MINIMAP_EXPANDED_HIT_STRIP_WIDTH = "22rem"; /** - * The minimap overlays the viewport's left edge while the content column is + * The minimap overlays the viewport's right edge while the content column is * centered, so the side gutter between them shrinks under browser zoom or a * narrow pane. A fixed-width hover strip would then sit on top of the message * text and swallow its pointer events. Cap the strip's width so it never @@ -130,7 +130,7 @@ export function resolveTimelineMinimapHitStripWidth(viewportWidth: number): numb 0, Math.min( TIMELINE_MINIMAP_HIT_STRIP_MAX_WIDTH, - Math.floor(sideGutter) - TIMELINE_MINIMAP_HIT_STRIP_LEFT, + Math.floor(sideGutter) - TIMELINE_MINIMAP_HIT_STRIP_INSET, ), ); } diff --git a/apps/web/src/components/chat/MessagesTimeline.test.tsx b/apps/web/src/components/chat/MessagesTimeline.test.tsx index 7ee4514c3709..0acefe2de2a8 100644 --- a/apps/web/src/components/chat/MessagesTimeline.test.tsx +++ b/apps/web/src/components/chat/MessagesTimeline.test.tsx @@ -346,6 +346,25 @@ describe("MessagesTimeline", () => { expect(fadedMarkup).toContain("topbar-scroll-fade"); }); + it("renders the user-message minimap on the right side", () => { + const firstEntry = buildUserTimelineEntry("First prompt."); + const secondEntry = { + ...buildUserTimelineEntry("Second prompt."), + id: "entry-2", + message: { + ...buildUserTimelineEntry("Second prompt.").message, + id: MessageId.make("message-2"), + }, + }; + const markup = renderToStaticMarkup( + , + ); + + expect(markup).toContain('data-testid="timeline-minimap"'); + expect(markup).toContain("absolute inset-y-0 right-0"); + expect(markup).not.toContain("absolute inset-y-0 left-0"); + }); + it("keeps assistant changed-files headers sticky below the thread header", () => { const assistantMessageId = MessageId.make("message-assistant-with-files"); const turnId = TurnId.make("turn-with-files"); diff --git a/apps/web/src/components/chat/MessagesTimeline.tsx b/apps/web/src/components/chat/MessagesTimeline.tsx index af920c0d6156..1ad0947846de 100644 --- a/apps/web/src/components/chat/MessagesTimeline.tsx +++ b/apps/web/src/components/chat/MessagesTimeline.tsx @@ -789,7 +789,7 @@ function TimelineMinimap({ return (