diff --git a/assets/css/editor.css b/assets/css/editor.css index 609cd3bc3..c6a975962 100644 --- a/assets/css/editor.css +++ b/assets/css/editor.css @@ -105,6 +105,13 @@ Also some spacing adjustments. margin: 0 !important; } +/* Command palette height is computed based on editor height, + which is not what we want, since the editor can have just + a single line, hence we override with a fixed height */ +.monaco-editor .quick-input-list .monaco-list { + max-height: 300px !important; +} + /* === Monaco cursor widget === */ .monaco-cursor-widget-container { diff --git a/assets/js/cell/live_editor.js b/assets/js/cell/live_editor.js index 8b14af3d0..ba13f0051 100644 --- a/assets/js/cell/live_editor.js +++ b/assets/js/cell/live_editor.js @@ -218,6 +218,19 @@ class LiveEditor { "editor.action.showHover", monaco.KeyMod.CtrlCmd | monaco.KeyCode.KEY_I ); + + /* Overrides */ + + // Move the command palette widget to overflowing widgets container, + // so that it's visible on small editors. + // See: https://github.com/microsoft/monaco-editor/issues/70 + const commandPaletteNode = this.editor.getContribution( + "editor.controller.quickInput" + ).widget.domNode; + commandPaletteNode.remove(); + this.editor._modelData.view._contentWidgets.overflowingContentWidgetsDomNode.domNode.appendChild( + commandPaletteNode + ); } /**