From 79775ad56cc8fef7fa4b5f7dcee2b044e6c0d30b Mon Sep 17 00:00:00 2001
From: Nilay Majorwar <nilaymajorwar@gmail.com>
Date: Fri, 18 Feb 2022 21:11:03 +0530
Subject: [PATCH] Make input and output panes vertically scrollable

---
 ui/input-editor.tsx  | 27 ++++++++++++++++++---------
 ui/output-viewer.tsx |  4 +++-
 2 files changed, 21 insertions(+), 10 deletions(-)

diff --git a/ui/input-editor.tsx b/ui/input-editor.tsx
index 3b65122..9c8dc02 100644
--- a/ui/input-editor.tsx
+++ b/ui/input-editor.tsx
@@ -27,15 +27,24 @@ const InputEditorComponent = (
   );
 
   return (
-    <TextArea
-      fill
-      large
-      growVertically
-      inputRef={textareaRef}
-      readOnly={props.readOnly}
-      placeholder="Enter program input here..."
-      style={{ height: "100%", resize: "none", boxShadow: "none" }}
-    />
+    <div style={{ height: "100%" }}>
+      <TextArea
+        fill
+        large
+        growVertically
+        inputRef={textareaRef}
+        readOnly={props.readOnly}
+        placeholder="Enter program input here..."
+        style={{
+          resize: "none",
+          boxShadow: "none",
+          // BlueprintJS edits the element's height directly as px which leads
+          // to overflow and underflow issues, so we 1-up it with our own weapons.
+          maxHeight: "100%",
+          minHeight: "100%",
+        }}
+      />
+    </div>
   );
 };
 
diff --git a/ui/output-viewer.tsx b/ui/output-viewer.tsx
index f829016..734f2ff 100644
--- a/ui/output-viewer.tsx
+++ b/ui/output-viewer.tsx
@@ -66,7 +66,9 @@ const OutputViewerComponent = (_: {}, ref: React.Ref<OutputViewerRef>) => {
   }));
 
   return (
-    <div style={{ padding: 10, fontSize: 16 }}>
+    <div
+      style={{ height: "100%", padding: 10, fontSize: 16, overflowY: "auto" }}
+    >
       <pre
         style={{ margin: 0, whiteSpace: "pre-wrap", wordWrap: "break-word" }}
       >