Make input and output panes vertically scrollable

ui/input-editor.tsx

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