Skip to content

fix(web): fix inaccurate scroll position when selecting chat references#1035

Merged
brendan-kellam merged 3 commits intomainfrom
brendan/fix-chat-reference-scroll-SOU-724
Mar 24, 2026
Merged

fix(web): fix inaccurate scroll position when selecting chat references#1035
brendan-kellam merged 3 commits intomainfrom
brendan/fix-chat-reference-scroll-SOU-724

Conversation

@brendan-kellam
Copy link
Contributor

@brendan-kellam brendan-kellam commented Mar 24, 2026

Summary

  • Fixed inaccurate scroll position when clicking a chat reference by switching from lineBlockAt to a two-step scroll using coordsAtPos. CodeMirror 6 virtualizes line rendering and returns estimated positions for off-screen lines; the first step instantly scrolls the file into the browser viewport so CodeMirror renders and measures the target lines, then the second step scrolls precisely to the correct line.
  • Added a highlighted left border on the file header when a file-only reference (no range) is selected, using the existing --chat-reference-selected-border color token.

Fixes #1034

Test plan

  • Click a chat reference that points to a line range in a file far down the sources list — verify scroll lands on the correct line on the first click
  • Click a chat reference with no range — verify the file header shows the selection border

🤖 Generated with Claude Code

Summary by CodeRabbit

  • Bug Fixes
    • Fixed inaccurate scroll position when selecting a chat reference in the ask UI.
    • Improved scroll positioning accuracy for file references with enhanced line-to-viewport centering.
    • Enhanced visual feedback for selected references without specific line ranges.

…es (SOU-724)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@github-actions

This comment has been minimized.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Mar 24, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ce9fb028-e51e-4f41-92dc-fe68bc3c201f

📥 Commits

Reviewing files that changed from the base of the PR and between d910b8d and eca6ed5.

📒 Files selected for processing (3)
  • CHANGELOG.md
  • packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx
  • packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx

Walkthrough

Updated scroll positioning for selecting file references: the flow now instantly brings the file into the viewport, then uses CodeMirror's coordsAtPos on the next animation frame to compute and center the precise line inside the ScrollArea. Also added border styling for selected references without a range and a changelog entry.

Changes

Cohort / File(s) Summary
Changelog
CHANGELOG.md
Added entry under ## [Unreleased]### Fixed: “Fixed inaccurate scroll position when selecting a chat reference in the ask UI.”
Visual Styling
packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx
Added memoized isSelectedWithoutRange flag and conditional border-chat-reference-selected-border/border-b classes for selected references without a range.
Scroll Positioning Logic
packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx
Replaced single-pass scroll calculation with a two-step, CodeMirror-aware flow: expand/instant-scroll the file into viewport, then on next animation frame use view.coordsAtPos(pos) to compute exact coordinates and instant-scroll the ScrollArea to center the line. Non-range fallback now uses instant scrolling.

Sequence Diagram(s)

sequenceDiagram
  participant UI as "Ask UI\n(Component)"
  participant ScrollArea as "ScrollArea\n(Container)"
  participant Viewport as "Browser\nViewport"
  participant CM as "CodeMirror\n(view)"

  UI->>ScrollArea: Request scroll to selected reference
  alt file collapsed
    UI->>UI: Expand file (instant)
  end
  UI->>Viewport: element.scrollIntoView({behavior: 'instant'})
  Note right of Viewport: File element is now in viewport
  Viewport->>CM: nextAnimationFrame -> request coordsAtPos(pos)
  CM-->>ScrollArea: return line coordinates (accurate)
  ScrollArea->>ScrollArea: instant scroll to center the computed line
  ScrollArea-->>UI: scroll complete
Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested reviewers

  • msukkari
✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch brendan/fix-chat-reference-scroll-SOU-724

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

Comment @coderabbitai help to get the list of available commands and usage tips.

@brendan-kellam brendan-kellam merged commit 8001af2 into main Mar 24, 2026
6 checks passed
@brendan-kellam brendan-kellam deleted the brendan/fix-chat-reference-scroll-SOU-724 branch March 24, 2026 03:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FR] add visual indicator for full file citations

1 participant