Tweak styling of advanced notebook tools.

packages/notebook/src/notebooktools.ts

@@ -51,6 +51,7 @@ class RankedPanel<T extends Widget = Widget> extends Widget {
   constructor() {
     super();
     this.layout = new PanelLayout();
+    this.addClass('jp-RankedPanel');
   }
 
   addWidget(widget: Widget, rank: number): void {
@@ -495,11 +496,10 @@ export namespace NotebookTools {
         editorFactory
       });
       this.editor.title.label = options.label || 'Edit Metadata';
-      const titleNode = new Widget();
+      const titleNode = new Widget({ node: document.createElement('label') });
       titleNode.node.textContent = options.label || 'Edit Metadata';
       layout.addWidget(titleNode);
       layout.addWidget(this.editor);
-      // layout.addWidget(new Collapse({ widget: this.editor, collapsed }));
     }
 
     /**

packages/notebook/style/index.css

@@ -230,6 +230,10 @@
   flex-direction: column;
 }
 
+.jp-RankedPanel > :not(:first-child) {
+  margin-top: 12px;
+}
+
 .jp-KeySelector {
   padding: 0px 12px 0 12px;
 }
@@ -240,7 +244,8 @@
   border: var(--jp-border-width) solid var(--jp-border-color1);
 }
 
-.jp-KeySelector label {
+.jp-KeySelector label,
+.jp-MetadataEditorTool label {
   line-height: 1.4;
 }