fix: Chrome diff scroll in All Files layout (#213)

Replace nested ScrollableOverlay with simple div in inline diff to fix vertical scroll blocking in Chrome. Add explicit h-full to stacked view flex container and disableHorizontal to main ScrollableOverlay for proper scroll behavior.
This commit is contained in:
Bohdan Triapitsyn
2026-01-25 18:52:58 +02:00
committed by GitHub
parent f77181a649
commit 5950a31632
3 changed files with 7 additions and 9 deletions
@@ -41,7 +41,7 @@ export const ScrollableOverlay = React.forwardRef<HTMLElement, ScrollableOverlay
ref={containerRef as React.Ref<HTMLElement>}
className={cn(
"overlay-scrollbar-target overlay-scrollbar-container overscroll-none",
fillContainer ? "flex-1 min-h-0 w-full h-full" : "flex-none w-full h-auto",
fillContainer ? "flex-1 min-h-0 w-full" : "flex-none w-full h-auto",
disableHorizontal ? "overflow-y-auto overflow-x-hidden" : "overflow-auto",
className
)}
@@ -1072,7 +1072,7 @@ export const DiffView: React.FC = () => {
if (!effectiveDirectory) return null;
return (
<div className="flex flex-1 min-h-0 gap-3 px-3 pb-3 pt-2">
<div className="flex flex-1 min-h-0 h-full gap-3 px-3 pb-3 pt-2">
{showFileSidebar && (
<section className="hidden lg:flex w-72 flex-col rounded-xl border border-border/60 bg-background/70 overflow-hidden">
<div className="flex items-center justify-between px-3 py-1.5 border-b border-border/40">
@@ -1088,8 +1088,9 @@ export const DiffView: React.FC = () => {
)}
<ScrollableOverlay
ref={diffScrollRef}
outerClassName="flex-1 min-h-0"
outerClassName="flex-1 min-h-0 h-full"
className="pr-2"
disableHorizontal
>
<div className="flex flex-col gap-3">
{changedFiles.map((file) => (
@@ -482,19 +482,16 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
}
// Fallback for 'inline' layout: use Portal behavior
// Use simple div with overflow-x-auto to avoid nested ScrollableOverlay issues in Chrome
return (
<div className={cn("relative", "w-full")}>
<ScrollableOverlay
outerClassName="pierre-diff-wrapper w-full"
disableHorizontal={false}
fillContainer={false}
>
<div className="pierre-diff-wrapper w-full overflow-x-auto overflow-y-visible">
<FileDiff
fileDiff={fileDiff}
options={options}
selectedLines={selection}
/>
</ScrollableOverlay>
</div>
{selection && createPortal(
<div