From 5950a31632c213a564650a98c70b474cefd0f1de Mon Sep 17 00:00:00 2001
From: Bohdan Triapitsyn <artmore@protonmail.com>
Date: Sun, 25 Jan 2026 18:52:58 +0200
Subject: [PATCH] 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.
---
 packages/ui/src/components/ui/ScrollableOverlay.tsx   | 2 +-
 packages/ui/src/components/views/DiffView.tsx         | 5 +++--
 packages/ui/src/components/views/PierreDiffViewer.tsx | 9 +++------
 3 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/packages/ui/src/components/ui/ScrollableOverlay.tsx b/packages/ui/src/components/ui/ScrollableOverlay.tsx
index 7b00b51e..1ca61570 100644
--- a/packages/ui/src/components/ui/ScrollableOverlay.tsx
+++ b/packages/ui/src/components/ui/ScrollableOverlay.tsx
@@ -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
           )}
diff --git a/packages/ui/src/components/views/DiffView.tsx b/packages/ui/src/components/views/DiffView.tsx
index 546f4209..88516fe1 100644
--- a/packages/ui/src/components/views/DiffView.tsx
+++ b/packages/ui/src/components/views/DiffView.tsx
@@ -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) => (
diff --git a/packages/ui/src/components/views/PierreDiffViewer.tsx b/packages/ui/src/components/views/PierreDiffViewer.tsx
index a2d65b9f..6ac0a43a 100644
--- a/packages/ui/src/components/views/PierreDiffViewer.tsx
+++ b/packages/ui/src/components/views/PierreDiffViewer.tsx
@@ -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