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:
committed by
GitHub
parent
f77181a649
commit
5950a31632
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user