From 84222d0a0c1a18be8cff212298767618a80bdd65 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonatan=20K=C5=82osko?= <jonatanklosko@gmail.com>
Date: Mon, 6 Dec 2021 14:15:44 +0100
Subject: [PATCH] Allow editor command palette to overflow (#764)

---
 assets/css/editor.css         |  7 +++++++
 assets/js/cell/live_editor.js | 13 +++++++++++++
 2 files changed, 20 insertions(+)

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