Make sure plugin list overflows properly.

packages/settingeditor-extension/src/settingeditor.ts

@@ -51,6 +51,11 @@ const DEFAULT_OUTER = [1, 3];
  */
 const SETTING_EDITOR_CLASS = 'jp-SettingEditor';
 
+/**
+ * The class name added to the top level split panel of the setting editor.
+ */
+const SETTING_EDITOR_MAIN_PANEL_CLASS = 'jp-SettingEditor-main';
+
 /**
  * The class name added to all plugin editors.
  */
@@ -137,6 +142,7 @@ class SettingEditor extends Widget {
       this._when = Array.isArray(when) ? Promise.all(when) : when;
     }
 
+    panel.addClass(SETTING_EDITOR_MAIN_PANEL_CLASS);
     layout.addWidget(panel);
     panel.addWidget(list);
     panel.addWidget(instructions);

packages/settingeditor-extension/style/settingeditor.css

@@ -32,9 +32,21 @@
 }
 
 
-#setting-editor .p-SplitPanel {
-  height: 100%;
-  width: 100%;
+#setting-editor > .p-Widget {
+  position: absolute;
+  top: var(--jp-toolbar-micro-height);
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+
+#setting-editor .jp-SettingEditor-main .p-SplitPanel {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
 }
 
 
@@ -80,6 +92,7 @@
   padding: 0;
   min-width: 150px;
   width: 150px;
+  overflow-y: auto;
 }