mirror of
https://github.com/coder/coder.git
synced 2026-09-24 15:04:27 +08:00
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:
@@ -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" />
|
||||
|
||||
Reference in New Issue
Block a user