diff --git a/static/js/mithril/sharedEnvironments.js b/static/js/mithril/sharedEnvironments.js index 7e602f8..81597e8 100644 --- a/static/js/mithril/sharedEnvironments.js +++ b/static/js/mithril/sharedEnvironments.js @@ -344,20 +344,28 @@ const SharedEnvironments = { const editorId = `env-display-${env.id}`; const editorDiv = document.createElement('div'); editorDiv.id = editorId; - editorDiv.style.height = '200px'; vnode.dom.appendChild(editorDiv); const editor = ace.edit(editorId); editor.setTheme("ace/theme/github_dark"); editor.session.setMode("ace/mode/json"); - editor.setValue(JSON.stringify(env.environment, null, 2), -1); + const content = JSON.stringify(env.environment, null, 2); + editor.setValue(content, -1); editor.setReadOnly(true); editor.setOptions({ fontSize: "13px", showPrintMargin: false, highlightActiveLine: false, - highlightGutterLine: false + highlightGutterLine: false, + maxLines: Infinity, + minLines: 3 }); + + // Auto-size to content + const lineCount = editor.session.getLength(); + const lineHeight = editor.renderer.layerConfig.lineHeight || 16; + editorDiv.style.height = (lineCount * lineHeight + 10) + 'px'; + editor.resize(); } }), m("div.mt-3.text-xs.text-gray-500.dark:text-gray-400", [ @@ -648,20 +656,28 @@ const SharedEnvironments = { const editorId = `version-${version.version_number}-${SharedEnvironments.historyModal.envId}`; const editorDiv = document.createElement('div'); editorDiv.id = editorId; - editorDiv.style.height = '150px'; vnode.dom.appendChild(editorDiv); const editor = ace.edit(editorId); editor.setTheme("ace/theme/github_dark"); editor.session.setMode("ace/mode/json"); - editor.setValue(JSON.stringify(version.environment, null, 2), -1); + const content = JSON.stringify(version.environment, null, 2); + editor.setValue(content, -1); editor.setReadOnly(true); editor.setOptions({ fontSize: "12px", showPrintMargin: false, highlightActiveLine: false, - highlightGutterLine: false + highlightGutterLine: false, + maxLines: Infinity, + minLines: 3 }); + + // Auto-size to content + const lineCount = editor.session.getLength(); + const lineHeight = editor.renderer.layerConfig.lineHeight || 15; + editorDiv.style.height = (lineCount * lineHeight + 10) + 'px'; + editor.resize(); } }) ])