Fix some styles.

packages/settingeditor-extension/src/settingeditor.ts

@@ -76,6 +76,11 @@ const PLUGIN_ICON_CLASS = 'jp-PluginList-icon';
  */
 const FIELDSET_TABLE_CLASS = 'jp-PluginFieldset-table';
 
+/**
+ * The class name added to the fieldset table add button cells.
+ */
+const FIELDSET_ADD_CLASS = 'jp-PluginFieldset-add';
+
 /**
  * The class name added to the fieldset table key cells.
  */
@@ -86,6 +91,11 @@ const FIELDSET_KEY_CLASS = 'jp-PluginFieldset-key';
  */
 const FIELDSET_VALUE_CLASS = 'jp-PluginFieldset-value';
 
+/**
+ * The class name added to the fieldset table type cells.
+ */
+const FIELDSET_TYPE_CLASS = 'jp-PluginFieldset-type';
+
 /**
  * The class name added to fieldset buttons.
  */
@@ -939,10 +949,10 @@ namespace Private {
     const label = `Fields - ${schema.title || plugin}`;
     const addClass = `${FIELDSET_BUTTON_CLASS} ${FIELDSET_ADD_ICON_CLASS}`;
     const headers = h.tr(
-      h.th(''),
-      h.th('Key'),
-      h.th('Default'),
-      h.th('Type'));
+      h.th({ className: FIELDSET_ADD_CLASS }, ''),
+      h.th({ className: FIELDSET_KEY_CLASS }, 'Key'),
+      h.th({ className: FIELDSET_VALUE_CLASS }, 'Default'),
+      h.th({ className: FIELDSET_TYPE_CLASS }, 'Type'));
 
     Object.keys(properties).forEach(key => {
       const field = properties[key];
@@ -954,8 +964,8 @@ namespace Private {
 
       fields[key] = h.tr(
         h.td(exists ? undefined : h.div({ className: addClass })),
-        h.td({ className: FIELDSET_KEY_CLASS, title: field.title },
-          h.code({ title: field.title }, key)),
+        h.td({ className: FIELDSET_KEY_CLASS, title: field.title || key },
+          h.code({ title: field.title || key }, key)),
         h.td({ className: FIELDSET_VALUE_CLASS, title: valueTitle },
           h.code({ title: valueTitle }, value)),
         h.td(h.code(type)));

packages/settingeditor-extension/style/settingeditor.css

@@ -3,6 +3,20 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+
+:root {
+  --jp-private-settingeditor-add-width: 15px;
+  --jp-private-settingeditor-key-width: 150px;
+  --jp-private-settingeditor-type-width: 75px;
+  --jp-private-settingeditor-value-width: calc(
+    100% -
+    var(--jp-private-settingeditor-add-width) -
+    var(--jp-private-settingeditor-key-width) -
+    var(--jp-private-settingeditor-type-width)
+  );
+}
+
+
 #setting-editor {
   background-color: var(--jp-layout-color0);
   border-top: var(--jp-border-width) solid var(--jp-border-color1);
@@ -139,10 +153,12 @@
 
 
 #setting-editor .jp-PluginEditor table.jp-PluginFieldset-table {
+  table-layout: fixed;
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
   padding: 2px;
   width: calc(100% - 4px);
+  overflow: hidden;
 }
 
 
@@ -159,9 +175,34 @@
 }
 
 
-#setting-editor .jp-PluginEditor .jp-PluginFieldset-value {
-  width: 100%;
-  max-width: 100%;
+#setting-editor .jp-PluginEditor .jp-PluginFieldset-table th.jp-PluginFieldset-add {
+  width: var(--jp-private-settingeditor-add-width);
+}
+
+
+#setting-editor .jp-PluginEditor .jp-PluginFieldset-table th.jp-PluginFieldset-key {
+  width: var(--jp-private-settingeditor-key-width);
+}
+
+
+#setting-editor .jp-PluginEditor .jp-PluginFieldset-table th.jp-PluginFieldset-value {
+  width: var(--jp-private-settingeditor-value-width);
+}
+
+
+#setting-editor .jp-PluginEditor .jp-PluginFieldset-table th.jp-PluginFieldset-type {
+  width: var(--jp-private-settingeditor-type-width);
+}
+
+
+#setting-editor .jp-PluginEditor td.jp-PluginFieldset-key {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+
+#setting-editor .jp-PluginEditor td.jp-PluginFieldset-value {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;