fix(diff): keep header controls and horizontal scroll within the panel when line wrap is off

In the changes/diff view, an unwrapped diff's intrinsic width leaked up the
flex chain: the flex-1 column holding the scroll area lacked min-width:0, so its
min-content (the widest line) stretched it — and every nested w-full element,
including the .pierre-diff-wrapper (overflow-x-auto) and the file header — grew
to the content width. That pushed the header's action controls past the narrow
viewport and left overflow-x-auto with nothing to scroll.

Add min-w-0 to the diff layout's flex items so the chain stays at viewport
width: long lines now scroll horizontally inside the diff, and the file header
controls stay visible.
This commit is contained in:
Bohdan Triapitsyn
2026-06-18 02:17:44 +03:00
parent 57c5808ef2
commit e4cfb628fe
@@ -1484,7 +1484,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
}; };
return ( return (
<div className={cn('flex flex-1 min-h-0 h-full', flushContent ? 'gap-0' : 'gap-3 px-3 pb-3 pt-2')}> <div className={cn('flex min-w-0 flex-1 min-h-0 h-full', flushContent ? 'gap-0' : '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">
@@ -1498,7 +1498,7 @@ export const DiffView: React.FC<DiffViewProps> = ({
/> />
</section> </section>
)} )}
<div className="relative flex-1 min-h-0 h-full"> <div className="relative flex-1 min-w-0 min-h-0 h-full">
<ScrollableOverlay <ScrollableOverlay
ref={diffScrollRef} ref={diffScrollRef}
outerClassName="min-h-0 h-full" outerClassName="min-h-0 h-full"