From aa18be10e1e23c31ec204cfa87ef7865694861a5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?R=C5=ABdolfs=20O=C5=A1i=C5=86=C5=A1?= <rudolfs@osins.org>
Date: Fri, 14 Aug 2026 15:41:54 +0200
Subject: [PATCH] Let the diff's side columns scroll

`max-height: 100%` resolved against an auto-height box, so it was
dropped and the commit list and comment column grew past the port
instead of scrolling inside it.
---
 src/components/Changes.svelte    |  5 ++++-
 src/components/PierreDiff.svelte | 12 +++++++++++-
 src/components/ReviewPage.svelte |  2 +-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/components/Changes.svelte b/src/components/Changes.svelte
index 01bd383dc..31220fe08 100644
--- a/src/components/Changes.svelte
+++ b/src/components/Changes.svelte
@@ -600,7 +600,10 @@
      scrolling a fraction of a pixel out from under it. It is content-sized up to
      the height the diff hands the column. */
   .commits-column {
-    max-height: 100%;
+    /* Handed down by the diff. A percentage would resolve against an indefinite
+       box and be dropped, and the list would grow past the port instead of
+       scrolling within it. */
+    max-height: var(--app-diff-overlay-height, 100%);
     overflow-y: auto;
     /* An outset ring, not a border: the file cards beside it are outlined the
        same way, and a real border would sit inside the box and leave the two a
diff --git a/src/components/PierreDiff.svelte b/src/components/PierreDiff.svelte
index c28e83711..35c3e6d79 100644
--- a/src/components/PierreDiff.svelte
+++ b/src/components/PierreDiff.svelte
@@ -324,6 +324,10 @@
     return () => observer.disconnect();
   });
 
+  // What is left of the port once the sticky bar has taken its share — the space
+  // the column actually has, and exactly its height once the bar is pinned.
+  const overlayHeight = $derived(Math.max(portHeight - stickyTopHeight, 0));
+
   // `DiffFileHeader`'s row height (`2.5rem`), fed to Pierre as the exact
   // `diffHeaderHeight` metric. It must be constant across all files — Pierre
   // estimates each file's position from this single metric (not the measured
@@ -1405,10 +1409,16 @@
   {/if}
   {#if overlayLeft}
     <div bind:this={overlayLeftEl} class="pierre-diff-overlay-left">
+      <!-- The height is published as well as applied. Whatever the column holds
+           has to scroll inside it, and for that it needs a definite height of its
+           own: a percentage of this box resolves against an indefinite height and
+           is dropped, so the content would simply grow past the bottom of the
+           port instead of scrolling. -->
       <div
         class="pierre-diff-overlay-left-column"
         style:width={overlayLeftWidth}
-        style:max-height="{portHeight}px">
+        style:max-height="{overlayHeight}px"
+        style:--app-diff-overlay-height="{overlayHeight}px">
         {@render overlayLeft()}
       </div>
     </div>
diff --git a/src/components/ReviewPage.svelte b/src/components/ReviewPage.svelte
index c057cd8b6..93705b1e0 100644
--- a/src/components/ReviewPage.svelte
+++ b/src/components/ReviewPage.svelte
@@ -727,7 +727,7 @@
   /* Frames the scroll port itself, so the header inside it pins to a border that
      does not move — the same arrangement as the commits column. */
   .comment-column {
-    max-height: 100%;
+    max-height: var(--app-diff-overlay-height, 100%);
     overflow-y: auto;
     /* An outset ring, not a border: the file cards beside it are outlined the
        same way, and a real border would sit inside the box and leave the two a