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

* fix(web): fix inaccurate scroll position when selecting chat references (SOU-724)

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

* chore: update CHANGELOG for #1035

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

---------

Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>

Author: brendan-kellam

CHANGELOG.md

@@ -27,6 +27,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Fixed homepage scrolling issue in the ask UI. [#1014](https://github.com/sourcebot-dev/sourcebot/pull/1014)
 - Fixed UI freeze when the `grep` tool returns a large number of results with `groupByRepo=true`. [#1032](https://github.com/sourcebot-dev/sourcebot/pull/1032)
 - Fixed issue where the search scope selection persisted after a new thread is created. [#1033](https://github.com/sourcebot-dev/sourcebot/pull/1033)
+- Fixed inaccurate scroll position when selecting a chat reference in the ask UI. [#1035](https://github.com/sourcebot-dev/sourcebot/pull/1035)
 
 ## [4.15.11] - 2026-03-20
 

packages/web/src/features/chat/components/chatThread/referencedFileSourceListItem.tsx

@@ -214,13 +214,18 @@ const ReferencedFileSourceListItemComponent = ({
         return isExpanded ? ChevronDown : ChevronRight;
     }, [isExpanded]);
 
+    const isSelectedWithoutRange = useMemo(() => {
+        return references.some(r => r.id === selectedReference?.id && !selectedReference?.range);
+    }, [references, selectedReference?.id, selectedReference?.range]);
+
     return (
         <div className="relative" id={id}>
             {/* Sentinel element to scroll to when collapsing a file */}
             <div id={`${id}-start`} />
             {/* Sticky header outside the bordered container */}
             <div className={cn("sticky top-0 z-10 flex flex-row items-center bg-accent py-1 px-3 gap-1.5 border-l border-r border-t rounded-t-md", {
                 'rounded-b-md border-b': !isExpanded,
+                'border-chat-reference-selected-border border-b': isSelectedWithoutRange,
             })}>
                 <ExpandCollapseIcon className={`h-3 w-3 cursor-pointer mt-0.5`} onClick={() => onExpandedChanged(!isExpanded)} />
                 <PathHeader

packages/web/src/features/chat/components/chatThread/referencedSourcesListView.tsx

@@ -117,34 +117,42 @@ const ReferencedSourcesListViewComponent = ({
             const view = editorRef.view;
             const lineNumber = selectedReference.range.startLine;
 
-            // Get the line's position within the CodeMirror document
             const pos = view.state.doc.line(lineNumber).from;
-            const blockInfo = view.lineBlockAt(pos);
-            const lineTopInCodeMirror = blockInfo.top;
-
-            // Get the bounds of both elements
-            const viewportRect = scrollAreaViewport.getBoundingClientRect();
-            const codeMirrorRect = view.dom.getBoundingClientRect();
-
-            // Calculate the line's position relative to the ScrollArea content
-            const lineTopRelativeToScrollArea = lineTopInCodeMirror + (codeMirrorRect.top - viewportRect.top) + scrollAreaViewport.scrollTop;
-
-            // Get the height of the visible ScrollArea
-            const scrollAreaHeight = scrollAreaViewport.clientHeight;
-
-            // Calculate the target scroll position to center the line
-            const targetScrollTop = lineTopRelativeToScrollArea - (scrollAreaHeight / 3);
 
             // Expand the file if it's collapsed.
             setCollapsedFileIds((collapsedFileIds) => collapsedFileIds.filter((id) => id !== fileId));
 
-            // Scroll to the calculated position
-            // @NOTE: Using requestAnimationFrame is a bit of a hack to ensure
-            // that the collapsed file ids state has updated before scrolling.
+            // @hack: CodeMirror 6 virtualizes line rendering — it only renders lines near the
+            // browser viewport and uses estimated heights for everything else. This means
+            // coordsAtPos() returns inaccurate positions for lines that are off-screen,
+            // causing the scroll to land at the wrong position on the first click.
+            //
+            // To work around this, we use a two-step scroll:
+            //   Step 1: Instantly bring the file element into the browser viewport. This
+            //           forces CodeMirror to render and measure the target lines.
+            //   Step 2: In the next frame (after CodeMirror has measured), coordsAtPos()
+            //           returns accurate screen coordinates which we use to scroll precisely
+            //           to the target line.
+            scrollIntoView(fileSourceElement, {
+                scrollMode: 'if-needed',
+                block: 'start',
+                behavior: 'instant',
+            });
+
             requestAnimationFrame(() => {
+                const coords = view.coordsAtPos(pos);
+                if (!coords) {
+                    return;
+                }
+
+                const viewportRect = scrollAreaViewport.getBoundingClientRect();
+                const lineTopRelativeToScrollArea = coords.top - viewportRect.top + scrollAreaViewport.scrollTop;
+                const scrollAreaHeight = scrollAreaViewport.clientHeight;
+                const targetScrollTop = lineTopRelativeToScrollArea - (scrollAreaHeight / 3);
+
                 scrollAreaViewport.scrollTo({
                     top: Math.max(0, targetScrollTop),
-                    behavior: 'smooth',
+                    behavior: 'instant',
                 });
             });
         }
@@ -154,7 +162,7 @@ const ReferencedSourcesListViewComponent = ({
             scrollIntoView(fileSourceElement, {
                 scrollMode: 'if-needed',
                 block: 'start',
-                behavior: 'smooth',
+                behavior: 'instant',
             });
         }
     }, [getFileId, sources, selectedReference]);