Update code block heights in browser, for #266.

donkirkby · Jul 5, 2020 · 7826233 · 7826233
1 parent b229f32
commit 7826233
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/html/src/App.css b/html/src/App.css
@@ -13,7 +13,6 @@
 .page-footer { height: 3em }
 
 .editor-pane {
-  height: 25em;
   width: 50%;
   position: relative;
 }

diff --git a/html/src/App.js b/html/src/App.js
@@ -43,6 +43,7 @@ class Editor extends Component {
             this.setState({selectedLine: this.props.selectedLine});
             this.content.current.editor.gotoLine(this.props.selectedLine+1);
         }
+        this.content.current.editor.resize();
     }
 
     render() {
@@ -177,7 +178,8 @@ class CodeSample extends Component {
             progressBar = null,
             outputHeaders = null,
             outputSection = null,
-            resetButton = null;
+            resetButton = null,
+            lineCount = 1 + this.state.source.split(/\r\n|\r|\n/).length;
         if (this.state.isLive) {
             displayEditor = <div className="editor-pane">
                 <Editor
@@ -224,7 +226,8 @@ class CodeSample extends Component {
         return (
             <div className="codeSample">
                 <div className="editor-wrapper">
-                    <div className="editor-pane">
+                    <div className="editor-pane"
+                        style={{height: lineCount*18 + "px"}}>
                         <Editor
                             value={this.state.source}
                             scrollTop={this.state.scrollTop}