From 31b9c3d3a5caecf6a68eef6f5e78c1fdb1c1a770 Mon Sep 17 00:00:00 2001
From: Mike Sawka <mike.sawka@gmail.com>
Date: Fri, 1 Mar 2024 18:28:39 -0800
Subject: [PATCH] calculate editor height correctly (#367)

---
 src/plugins/code/code.less |  2 +-
 src/plugins/code/code.tsx  | 45 ++++++++++++++++++++++----------------
 2 files changed, 27 insertions(+), 20 deletions(-)

diff --git a/src/plugins/code/code.less b/src/plugins/code/code.less
index 0dfbb1bf6..fea97d699 100644
--- a/src/plugins/code/code.less
+++ b/src/plugins/code/code.less
@@ -76,7 +76,7 @@
     .split-horizontal {
         display: flex;
         width: 100%;
-        height: calc(100% - var(--termlineheight) - 7px);
+        height: calc(100% - var(--termlineheight) - 11px);
         border-bottom: 1px solid var(--app-border-color);
     }
 
diff --git a/src/plugins/code/code.tsx b/src/plugins/code/code.tsx
index 957d530d1..f5963108c 100644
--- a/src/plugins/code/code.tsx
+++ b/src/plugins/code/code.tsx
@@ -86,7 +86,7 @@ class SourceCodeRenderer extends React.Component<
     constructor(props) {
         super(props);
         this.monacoEditor = null;
-        const editorHeight = Math.max(props.savedHeight - 25, 0); // must subtract the padding/margin to get the real editorHeight
+        const editorHeight = Math.max(props.savedHeight - this.getEditorHeightBuffer(), 0); // must subtract the padding/margin to get the real editorHeight
         this.markdownRef = React.createRef();
         this.syncing = false;
         let isClosed = props.lineState["prompt:closed"];
@@ -322,14 +322,19 @@ class SourceCodeRenderer extends React.Component<
         });
     };
 
+    getEditorHeightBuffer(): number {
+        const heightBuffer = GlobalModel.lineHeightEnv.lineHeight + 11;
+        return heightBuffer;
+    }
+
     setEditorHeight = () => {
-        const fullWindowHeight = this.props.opts.maxSize.height;
-        let _editorHeight = fullWindowHeight;
+        const maxEditorHeight = this.props.opts.maxSize.height - this.getEditorHeightBuffer();
+        let _editorHeight = maxEditorHeight;
         let allowEditing = this.getAllowEditing();
         if (!allowEditing) {
             const noOfLines = Math.max(this.state.code.split("\n").length, 5);
             const lineHeight = Math.ceil(GlobalModel.lineHeightEnv.lineHeight);
-            _editorHeight = Math.min(noOfLines * lineHeight + 10, fullWindowHeight);
+            _editorHeight = Math.min(noOfLines * lineHeight + 10, maxEditorHeight);
         }
         this.setState({ editorHeight: _editorHeight }, () => {
             if (this.props.isSelected) {
@@ -368,26 +373,28 @@ class SourceCodeRenderer extends React.Component<
         return opts;
     }
 
-    getCodeEditor = () => (
-        <div style={{ maxHeight: this.props.opts.maxSize.height }}>
-            {this.state.showReadonly && <div className="readonly">{"read-only"}</div>}
-            <Editor
-                theme="wave-theme"
-                height={this.state.editorHeight}
-                defaultLanguage={this.state.selectedLanguage}
-                value={this.state.code}
-                onMount={this.handleEditorDidMount}
-                options={this.getEditorOptions()}
-                onChange={this.handleEditorChange}
-            />
-        </div>
-    );
+    getCodeEditor = () => {
+        return (
+            <div className="editor-wrap" style={{ maxHeight: this.state.editorHeight }}>
+                {this.state.showReadonly && <div className="readonly">{"read-only"}</div>}
+                <Editor
+                    theme="wave-theme"
+                    height={this.state.editorHeight}
+                    defaultLanguage={this.state.selectedLanguage}
+                    value={this.state.code}
+                    onMount={this.handleEditorDidMount}
+                    options={this.getEditorOptions()}
+                    onChange={this.handleEditorChange}
+                />
+            </div>
+        );
+    };
 
     getPreviewer = () => {
         return (
             <div
                 className="scroller"
-                style={{ maxHeight: this.props.opts.maxSize.height }}
+                style={{ maxHeight: this.state.editorHeight }}
                 ref={this.markdownRef}
                 onScroll={() => this.handleDivScroll()}
             >