Make input and output panes vertically scrollable

ui/input-editor.tsx

@@ -27,15 +27,24 @@ const InputEditorComponent = (
   );
 
   return (
-    <TextArea
+    <div style={{ height: "100%" }}>
-      fill
+      <TextArea
-      large
+        fill
-      growVertically
+        large
-      inputRef={textareaRef}
+        growVertically
-      readOnly={props.readOnly}
+        inputRef={textareaRef}
-      placeholder="Enter program input here..."
+        readOnly={props.readOnly}
-      style={{ height: "100%", resize: "none", boxShadow: "none" }}
+        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>
   );
 };
 

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" }}
       >