pingdotgg · Adamulek123 · Sep 28, 2026
diff --git a/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx b/apps/web/src/components/pullRequest/PullRequestCodeTab.tsx
@@ -192,6 +192,7 @@ function getReviewPositionAnchor(position: PullRequestReviewPosition): {
  * drafted rather than being posted as it is typed.
  */
 function PullRequestCodeTab({
+  scrollerRef,
   environmentId,
   reference,
   detail,
@@ -204,6 +205,7 @@ function PullRequestCodeTab({
   onRefresh,
   refreshToken = 0,
 }: {
+  scrollerRef: (node: HTMLDivElement | null) => void;
   environmentId: EnvironmentId;
   reference: PullRequestRef;
   detail: PullRequestDetailView;
@@ -1327,7 +1329,9 @@ function PullRequestCodeTab({
   const withToolbar = (body: ReactNode) => (
     <div className="flex h-full min-h-0 flex-col">
       {toolbar}
-      <div className="min-h-0 flex-1 overflow-auto">{body}</div>
+      <div ref={scrollerRef} className="min-h-0 flex-1 overflow-auto">
+        {body}
+      </div>
     </div>
   );
 
@@ -1507,6 +1511,7 @@ function PullRequestCodeTab({
             // interaction, but its native host outline clips and competes with the focus
             // indicators on its actual controls.
             className="h-full overflow-auto [scrollbar-gutter:stable]"
+            containerRef={scrollerRef}
             viewerRef={setViewer}
             items={items}
             selectedLines={selectedLines}

diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.test.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.test.tsx
@@ -101,43 +101,49 @@ vi.mock("./PullRequestThreadLinks", () => ({ PullRequestThreadLinks: () => null
 vi.mock("./PullRequestSummaryTab", () => ({
   PullRequestSummaryTab: ({
     onFixFinding,
+    scrollerRef,
   }: ComponentProps<typeof import("./PullRequestSummaryTab").PullRequestSummaryTab>) => (
-    <button
-      onClick={() =>
-        onFixFinding?.({
-          kind: "check",
-          check: { name: "Unit tests", status: "failure", description: "Test failed", url: null },
-        })
-      }
-    >
-      Fix check
-    </button>
+    <div ref={scrollerRef} data-test-scroll="summary">
+      <button
+        onClick={() =>
+          onFixFinding?.({
+            kind: "check",
+            check: { name: "Unit tests", status: "failure", description: "Test failed", url: null },
+          })
+        }
+      >
+        Fix check
+      </button>
+    </div>
   ),
 }));
 vi.mock("./PullRequestCodeTab", () => ({
   default: ({
     onAddToAgentSelection,
+    scrollerRef,
   }: ComponentProps<typeof import("./PullRequestCodeTab").default>) => (
-    <button
-      onClick={() =>
-        onAddToAgentSelection?.({
-          request: "Fix this line",
-          comment: {
-            id: "note-1",
-            sectionId: "file:a.ts",
-            sectionTitle: "a.ts",
-            filePath: "a.ts",
-            startIndex: 0,
-            endIndex: 0,
-            rangeLabel: "L1",
-            text: "Please fix",
-            diff: "+broken()",
-          },
-        })
-      }
-    >
-      Add to agent
-    </button>
+    <div ref={scrollerRef} data-test-scroll="code">
+      <button
+        onClick={() =>
+          onAddToAgentSelection?.({
+            request: "Fix this line",
+            comment: {
+              id: "note-1",
+              sectionId: "file:a.ts",
+              sectionTitle: "a.ts",
+              filePath: "a.ts",
+              startIndex: 0,
+              endIndex: 0,
+              rangeLabel: "L1",
+              text: "Please fix",
+              diff: "+broken()",
+            },
+          })
+        }
+      >
+        Add to agent
+      </button>
+    </div>
   ),
 }));
 
@@ -336,3 +342,82 @@ describe.each([
     }
   });
 });
+
+it("changes the title only for the active tab's main scroller", async () => {
+  const scrollers = new Map<string, { scrollTop: number; scrollHeight: number }>();
+  await act(async () => {
+    renderer = create(
+      <PullRequestDetailPanel
+        environmentId={threadRef.environmentId}
+        reference={detail}
+        context="page"
+        shortcutsEnabled={false}
+        getShortcutContext={() => ({
+          terminalFocus: false,
+          terminalOpen: false,
+          previewFocus: false,
+          previewOpen: false,
+          isWeb: true,
+          isDesktop: false,
+        })}
+      />,
+      {
+        createNodeMock: (element) => {
+          const props = element.props as Record<string, unknown>;
+          const name = props["data-test-scroll"] as string | undefined;
+          if (name) {
+            const scroller = { scrollTop: 0, scrollHeight: 300 };
+            scrollers.set(name, scroller);
+            return scroller;
+          }
+          return { scrollHeight: props.inert === false ? 100 : 20 };
+        },
+      },
+    );
+  });
+
+  const mainScroll = renderer.root.findByProps({
+    className: "relative flex min-h-0 flex-1 flex-col overflow-hidden",
+  });
+  const titleFold = () => {
+    let node = renderer.root.findByType("h1");
+    while (typeof node.props.inert !== "boolean") node = node.parent!;
+    return node;
+  };
+  const summary = scrollers.get("summary")!;
+  const nested = { scrollTop: 200 };
+  await act(async () => mainScroll.props.onScrollCapture({ target: nested }));
+  expect(titleFold().props.inert).toBe(false);
+  summary.scrollTop = 180;
+  nested.scrollTop = 0;
+  await act(async () => {
+    mainScroll.props.onScrollCapture({ target: summary });
+    mainScroll.props.onScrollCapture({ target: nested });
+  });
+  expect(titleFold().props.inert).toBe(true);
+  expect(summary.scrollTop).toBe(100);
+  expect(nested.scrollTop).toBe(0);
+
+  await act(async () => mainScroll.props.onScrollCapture({ target: { scrollTop: 0 } }));
+  expect(titleFold().props.inert).toBe(true);
+  summary.scrollTop = 0;
+  await act(async () => mainScroll.props.onScrollCapture({ target: summary }));
+  expect(titleFold().props.inert).toBe(false);
+
+  await click("Code");
+  const code = scrollers.get("code")!;
+  summary.scrollTop = 180;
+  await act(async () => mainScroll.props.onScrollCapture({ target: summary }));
+  expect(titleFold().props.inert).toBe(false);
+  code.scrollTop = 180;
+  await act(async () => mainScroll.props.onScrollCapture({ target: code }));
+  expect(titleFold().props.inert).toBe(true);
+  expect(code.scrollTop).toBe(100);
+  await click("Summary");
+  expect(titleFold().props.inert).toBe(false);
+  await click("Code");
+  expect(titleFold().props.inert).toBe(true);
+  code.scrollTop = 0;
+  await act(async () => mainScroll.props.onScrollCapture({ target: code }));
+  expect(titleFold().props.inert).toBe(false);
+});
diff --git a/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx b/apps/web/src/components/pullRequest/PullRequestDetailPanel.tsx
@@ -548,18 +548,44 @@ export function PullRequestDetailPanel({
     setChromeCondensed(chromeStateByTab.current[tab] ?? false);
   }, [tab]);
   const condensed = chromeCondensed;
-  const scrollerRef = useRef<HTMLElement | null>(null);
+  const scrollerByTab = useRef<Partial<Record<DetailTab, HTMLDivElement | null>>>({});
+  const scrollerRefs = useMemo(
+    () => ({
+      summary: (node: HTMLDivElement | null) => {
+        scrollerByTab.current.summary = node;
+      },
+      timeline: (node: HTMLDivElement | null) => {
+        scrollerByTab.current.timeline = node;
+      },
+      code: (node: HTMLDivElement | null) => {
+        scrollerByTab.current.code = node;
+      },
+    }),
+    [],
+  );
   const foldRef = useRef<HTMLDivElement | null>(null);
   const condensedRowRef = useRef<HTMLDivElement | null>(null);
   // Refund after the fold commits so the content under the reader does not jump with its height.
-  const compensationRef = useRef<number | null>(null);
+  const compensationRef = useRef<{
+    tab: DetailTab;
+    scroller: HTMLDivElement;
+    delta: number;
+  } | null>(null);
   useLayoutEffect(() => {
-    if (compensationRef.current === null) return;
-    const scroller = scrollerRef.current;
-    const delta = compensationRef.current;
+    const compensation = compensationRef.current;
+    if (compensation === null) return;
     compensationRef.current = null;
-    if (scroller) scroller.scrollTop = Math.max(0, scroller.scrollTop + delta);
-  }, [condensed]);
+    if (
+      !condensed ||
+      compensation.tab !== tab ||
+      scrollerByTab.current[tab] !== compensation.scroller
+    )
+      return;
+    compensation.scroller.scrollTop = Math.max(
+      0,
+      compensation.scroller.scrollTop + compensation.delta,
+    );
+  }, [condensed, tab]);
   const lastSelectedMergeMethod = useUiStateStore((state) => state.pullRequestMergeMethod);
   const setLastSelectedMergeMethod = useUiStateStore((state) => state.setPullRequestMergeMethod);
   // Server-side and per project, like every other project setting. The
@@ -2686,8 +2712,8 @@ export function PullRequestDetailPanel({
       <div
         className="relative flex min-h-0 flex-1 flex-col overflow-hidden"
         onScrollCapture={(event) => {
-          const scroller = event.target as HTMLElement;
-          scrollerRef.current = scroller;
+          const scroller = scrollerByTab.current[tab];
+          if (event.target !== scroller || scroller === null || scroller === undefined) return;
           const top = scroller.scrollTop;
           setChromeCondensed((previous) => {
             let next = previous;
@@ -2702,7 +2728,7 @@ export function PullRequestDetailPanel({
                 next = false;
               }
             } else if (foldHeight > 0 && top > foldHeight + 32) {
-              compensationRef.current = -chromeDelta;
+              compensationRef.current = { tab, scroller, delta: -chromeDelta };
               next = true;
             }
             chromeStateByTab.current[tab] = next;
@@ -2722,6 +2748,7 @@ export function PullRequestDetailPanel({
             {mountedTabs.has("summary") ? (
               <div className={cn("absolute inset-0", tab !== "summary" && "invisible")}>
                 <PullRequestSummaryTab
+                  scrollerRef={scrollerRefs.summary}
                   environmentId={environmentId}
                   threadRef={threadRef}
                   reference={reference}
@@ -2749,6 +2776,7 @@ export function PullRequestDetailPanel({
                   />
                 ) : (
                   <PullRequestTimelineTab
+                    scrollerRef={scrollerRefs.timeline}
                     detail={detail}
                     environmentId={environmentId}
                     threadRef={threadRef}
@@ -2764,6 +2792,7 @@ export function PullRequestDetailPanel({
               <div className={cn("absolute inset-0", tab !== "code" && "invisible")}>
                 <Suspense fallback={<DiffPanelLoadingState label="Loading pull request diff..." />}>
                   <PullRequestCodeTab
+                    scrollerRef={scrollerRefs.code}
                     onAddToAgentSelection={addSelectionToAgent}
                     environmentId={environmentId}
                     reference={reference}

diff --git a/apps/web/src/components/pullRequest/PullRequestSummaryTab.test.tsx b/apps/web/src/components/pullRequest/PullRequestSummaryTab.test.tsx
@@ -79,6 +79,7 @@ afterEach(() => {
 function render(value = detail) {
   return (
     <PullRequestSummaryTab
+      scrollerRef={() => {}}
       environmentId={EnvironmentId.make("environment")}
       threadRef={null}
       reference={value}

diff --git a/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx b/apps/web/src/components/pullRequest/PullRequestSummaryTab.tsx
@@ -455,6 +455,7 @@ function CommentGroup({
 const COMMENT_PAGE = 10;
 
 export function PullRequestSummaryTab({
+  scrollerRef,
   environmentId,
   threadRef,
   reference,
@@ -469,6 +470,7 @@ export function PullRequestSummaryTab({
   onRefresh,
   onRefreshChecks = onRefresh,
 }: {
+  scrollerRef: (node: HTMLDivElement | null) => void;
   environmentId: EnvironmentId;
   threadRef: ScopedThreadRef | null;
   reference: PullRequestRef;
@@ -708,7 +710,7 @@ export function PullRequestSummaryTab({
   };
 
   return (
-    <div className="h-full overflow-y-auto" data-pull-request-summary-scroll>
+    <div ref={scrollerRef} className="h-full overflow-y-auto" data-pull-request-summary-scroll>
       <section className="px-4 pt-2.5 pb-1">
         <div className="space-y-2">
           <MetaRow icon={<UsersIcon className="size-3.5" />} label="Reviewers">

diff --git a/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx b/apps/web/src/components/pullRequest/PullRequestTimelineTab.tsx
@@ -538,6 +538,7 @@ function ReviewVerdictEvent({
 }
 
 export function PullRequestTimelineTab({
+  scrollerRef,
   detail,
   environmentId,
   threadRef = null,
@@ -546,6 +547,7 @@ export function PullRequestTimelineTab({
   onOpenCommit,
   onRefresh,
 }: {
+  scrollerRef: (node: HTMLDivElement | null) => void;
   detail: PullRequestDetailView;
   environmentId: EnvironmentId;
   threadRef?: ScopedThreadRef | null;
@@ -577,7 +579,7 @@ export function PullRequestTimelineTab({
   };
 
   return (
-    <div className="h-full overflow-y-auto px-4 py-5">
+    <div ref={scrollerRef} className="h-full overflow-y-auto px-4 py-5">
       <div className="mx-auto max-w-3xl">
         <div className="relative">
           <span aria-hidden className="absolute bottom-5 left-[15px] top-1 w-px bg-border/45" />