From e165d5e590ffde822c6b02911b568d32fe20d472 Mon Sep 17 00:00:00 2001
From: bkellam <bshizzle1234@gmail.com>
Date: Sun, 30 Nov 2025 17:31:26 -0800
Subject: [PATCH] improve scroll experience

---
 .../components/pureCodePreviewPanel.tsx       | 20 ++++++++++++-------
 1 file changed, 13 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/app/[domain]/browse/[...path]/components/pureCodePreviewPanel.tsx b/packages/web/src/app/[domain]/browse/[...path]/components/pureCodePreviewPanel.tsx
index 71cf1929..02e3b91c 100644
--- a/packages/web/src/app/[domain]/browse/[...path]/components/pureCodePreviewPanel.tsx
+++ b/packages/web/src/app/[domain]/browse/[...path]/components/pureCodePreviewPanel.tsx
@@ -80,7 +80,6 @@ export const PureCodePreviewPanel = ({
                 }
             }
         }
-
     }, [highlightRangeQuery]);
 
     const extensions = useMemo(() => {
@@ -108,20 +107,27 @@ export const PureCodePreviewPanel = ({
 
     // Scroll the highlighted range into view.
     useEffect(() => {
-        if (!highlightRange || !editorRef || !editorRef.state) {
+        if (!highlightRange || !editorRef || !editorRef.state || !editorRef.view) {
             return;
         }
 
         const doc = editorRef.state.doc;
         const { start, end } = highlightRange;
-        const selection = EditorSelection.range(
-            doc.line(start.lineNumber).from,
-            doc.line(end.lineNumber).from,
-        );
 
+        const from = doc.line(start.lineNumber).from;
+        const to = doc.line(end.lineNumber).to;
+        const selection = EditorSelection.range(from, to);
+
+        // When the selection is in view, we don't want to perform any scrolling
+        // as it could be jarring for the user. If it is not in view, scroll to the
+        // center of the viewport.
+        const viewport = editorRef.view.viewport;
+        const isInView = from >= viewport.from && to <= viewport.to;
+        const scrollStrategy = isInView ? "nearest" : "center";
+        
         editorRef.view?.dispatch({
             effects: [
-                EditorView.scrollIntoView(selection, { y: "center" }),
+                EditorView.scrollIntoView(selection, { y: scrollStrategy }),
             ]
         });
     }, [editorRef, highlightRange]);