From 8913d6fade55a6b00c3cdae07edf3226a037e940 Mon Sep 17 00:00:00 2001
From: Jun Wu <quark@meta.com>
Date: Wed, 8 Jan 2025 21:44:50 -0800
Subject: [PATCH] absorb: add scroll bars for the main content

Summary:
The diff to absorb could exceed the window size. Add a scrollbar for long
content.

Reviewed By: zzl0

Differential Revision: D67959264

fbshipit-source-id: ee9ff25761079e86f40f857198ec230a67fa0a2b
---
 .../src/stackEdit/ui/AbsorbStackEditPanel.tsx | 30 +++++++++++--------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/addons/isl/src/stackEdit/ui/AbsorbStackEditPanel.tsx b/addons/isl/src/stackEdit/ui/AbsorbStackEditPanel.tsx
index 1bcccd3a3ef44..ab2d57767bdc2 100644
--- a/addons/isl/src/stackEdit/ui/AbsorbStackEditPanel.tsx
+++ b/addons/isl/src/stackEdit/ui/AbsorbStackEditPanel.tsx
@@ -14,6 +14,7 @@ import type {CommitStackState, FileStackIndex, Rev} from '../commitStackState';
 import type {Map as ImMap} from 'immutable';
 
 import {FileHeader, IconType} from '../../ComparisonView/SplitDiffView/SplitDiffFileHeader';
+import {ScrollY} from '../../ComponentUtils';
 import {DragHandle} from '../../DragHandle';
 import {DraggingOverlay} from '../../DraggingOverlay';
 import {defaultRenderGlyph, RenderDag} from '../../RenderDag';
@@ -99,6 +100,9 @@ const styles = stylex.create({
   instruction: {
     padding: 'var(--halfpad) var(--pad)',
   },
+  scrollYPadding: {
+    paddingRight: 'var(--pad)',
+  },
 });
 
 /** The `AbsorbEdit` that is currently being dragged. */
@@ -126,18 +130,20 @@ export function AbsorbStackEditPanel() {
             </div>
           </Row>
         </div>
-        <RenderDag
-          className="absorb-dag"
-          dag={dag}
-          renderCommit={renderCommit}
-          renderCommitExtras={renderCommitExtras}
-          renderGlyph={RenderGlyph}
-          subset={subset}
-          style={{
-            /* make it "containing block" so findDragDestinationCommitKey works */
-            position: 'relative',
-          }}
-        />
+        <ScrollY maxSize="calc(100vh - 200px)" {...stylex.props(styles.scrollYPadding)}>
+          <RenderDag
+            className="absorb-dag"
+            dag={dag}
+            renderCommit={renderCommit}
+            renderCommitExtras={renderCommitExtras}
+            renderGlyph={RenderGlyph}
+            subset={subset}
+            style={{
+              /* make it "containing block" so findDragDestinationCommitKey works */
+              position: 'relative',
+            }}
+          />
+        </ScrollY>
       </Column>
       <AbsorbDraggingOverlay />
     </>