Allow editor command palette to overflow (#764)

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 {

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
+    );
   }
 
   /**