fix(site): match Local tab scroll layout with Remote tab in Git panel (#22949)

The Local tab in the Git panel wrapped all repo sections in a single
`ScrollArea`, which caused the file tree sidebar to scroll away with the
diff content instead of staying pinned. The Remote tab
(`FilesChangedPanel`) already uses the correct pattern where each
`DiffViewer` manages its own independent `ScrollArea` for the file tree
and diff list side-by-side.

## Changes

- Replace the outer `ScrollArea` in `LocalContent` with a flex column
container that gives each repo section a constrained height via
`min-h-0` and `flex-1`, allowing `DiffViewer`'s internal `ScrollArea`
components to activate properly
- Add `shrink-0` to `RepoHeader` so it stays pinned at the top of each
repo section
- Remove unused `ScrollArea` import

## Root cause

`LocalContent` wrapped everything in `<ScrollArea className="h-full">`,
creating a single scrollable container. Inside, each `RepoChangesPanel`
→ `DiffViewer` has `h-full` but since it was inside an already-scrolling
container, it never got a constrained height — so the inner `ScrollArea`
components for the file tree and diff list never activated. Everything
flowed in the outer scroll, making the file tree scroll away with the
content.
This commit is contained in:
Kyle Carberry
2026-03-11 14:31:37 +00:00
committed by GitHub
parent 7b846fb548
commit ac791e5bd3
+28 -30
View File
@@ -1,6 +1,5 @@
import type { WorkspaceAgentRepoChanges } from "api/typesGenerated";
import { Button } from "components/Button/Button";
import { ScrollArea } from "components/ScrollArea/ScrollArea";
import {
CheckIcon,
ColumnsIcon,
@@ -276,35 +275,34 @@ const LocalContent: FC<{
}
return (
<ScrollArea className="h-full">
<div className="flex flex-col">
{repoEntries.map(([repoRoot, repo], index) => {
const showSeparator = index > 0;
<div className="flex h-full flex-col">
{repoEntries.map(([repoRoot, repo], index) => {
const showSeparator = index > 0;
return (
<section
key={repoRoot}
className={cn(
showSeparator &&
"border-0 border-t border-solid border-border-default",
)}
>
<RepoHeader
repoRoot={repoRoot}
repo={repo}
onRefresh={onRefresh}
onCommit={() => onCommit(repoRoot)}
/>
<RepoChangesPanel
repo={repo}
isExpanded={isExpanded}
diffStyle={diffStyle}
/>
</section>
);
})}
</div>
</ScrollArea>
return (
<section
key={repoRoot}
className={cn(
"flex min-h-0 flex-1 flex-col",
showSeparator &&
"border-0 border-t border-solid border-border-default",
)}
>
<RepoHeader
repoRoot={repoRoot}
repo={repo}
onRefresh={onRefresh}
onCommit={() => onCommit(repoRoot)}
/>
<RepoChangesPanel
repo={repo}
isExpanded={isExpanded}
diffStyle={diffStyle}
/>
</section>
);
})}
</div>
);
};
@@ -329,7 +327,7 @@ const RepoHeader: FC<{
}, [onRefresh]);
return (
<div className="flex items-center gap-2 bg-surface-secondary px-3 py-2">
<div className="flex shrink-0 items-center gap-2 bg-surface-secondary px-3 py-2">
{/* Repo identity */}
<div className="flex min-w-0 flex-1 items-center gap-2">
<GitBranchIcon className="size-3.5 shrink-0 text-content-secondary" />