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>}
|
ref={containerRef as React.Ref<HTMLElement>}
|
||||||
className={cn(
|
className={cn(
|
||||||
"overlay-scrollbar-target overlay-scrollbar-container overscroll-none",
|
"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",
|
disableHorizontal ? "overflow-y-auto overflow-x-hidden" : "overflow-auto",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -1072,7 +1072,7 @@ export const DiffView: React.FC = () => {
|
|||||||
if (!effectiveDirectory) return null;
|
if (!effectiveDirectory) return null;
|
||||||
|
|
||||||
return (
|
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 && (
|
{showFileSidebar && (
|
||||||
<section className="hidden lg:flex w-72 flex-col rounded-xl border border-border/60 bg-background/70 overflow-hidden">
|
<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">
|
<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
|
<ScrollableOverlay
|
||||||
ref={diffScrollRef}
|
ref={diffScrollRef}
|
||||||
outerClassName="flex-1 min-h-0"
|
outerClassName="flex-1 min-h-0 h-full"
|
||||||
className="pr-2"
|
className="pr-2"
|
||||||
|
disableHorizontal
|
||||||
>
|
>
|
||||||
<div className="flex flex-col gap-3">
|
<div className="flex flex-col gap-3">
|
||||||
{changedFiles.map((file) => (
|
{changedFiles.map((file) => (
|
||||||
|
|||||||
@@ -482,19 +482,16 @@ export const PierreDiffViewer: React.FC<PierreDiffViewerProps> = ({
|
|||||||
}
|
}
|
||||||
|
|
||||||
// Fallback for 'inline' layout: use Portal behavior
|
// Fallback for 'inline' layout: use Portal behavior
|
||||||
|
// Use simple div with overflow-x-auto to avoid nested ScrollableOverlay issues in Chrome
|
||||||
return (
|
return (
|
||||||
<div className={cn("relative", "w-full")}>
|
<div className={cn("relative", "w-full")}>
|
||||||
<ScrollableOverlay
|
<div className="pierre-diff-wrapper w-full overflow-x-auto overflow-y-visible">
|
||||||
outerClassName="pierre-diff-wrapper w-full"
|
|
||||||
disableHorizontal={false}
|
|
||||||
fillContainer={false}
|
|
||||||
>
|
|
||||||
<FileDiff
|
<FileDiff
|
||||||
fileDiff={fileDiff}
|
fileDiff={fileDiff}
|
||||||
options={options}
|
options={options}
|
||||||
selectedLines={selection}
|
selectedLines={selection}
|
||||||
/>
|
/>
|
||||||
</ScrollableOverlay>
|
</div>
|
||||||
|
|
||||||
{selection && createPortal(
|
{selection && createPortal(
|
||||||
<div
|
<div
|
||||||
|
|||||||
Reference in New Issue
Block a user