diff --git a/packages/property-inspector/src/index.ts b/packages/property-inspector/src/index.ts index 7441af8150b7..fa049805a7ae 100644 --- a/packages/property-inspector/src/index.ts +++ b/packages/property-inspector/src/index.ts @@ -154,8 +154,12 @@ export class SideBarPropertyInspectorProvider extends PropertyInspectorProvider if (placeholder) { this._placeholder = placeholder; } else { - this._placeholder = new Widget(); - this._placeholder.node.textContent = 'No properties to inspect.'; + const node = document.createElement('div'); + const content = document.createElement('div'); + content.textContent = 'No properties to inspect.'; + content.className = 'jp-PropertyInspector-placeholderContent'; + node.appendChild(content); + this._placeholder = new Widget({ node }); this._placeholder.addClass('jp-PropertyInspector-placeholder'); } layout.widget = this._placeholder; diff --git a/packages/property-inspector/style/base.css b/packages/property-inspector/style/base.css index aee3212643c2..9e380f9c4817 100644 --- a/packages/property-inspector/style/base.css +++ b/packages/property-inspector/style/base.css @@ -6,12 +6,20 @@ .jp-PropertyInspector { display: flex; - align-items: center; - justify-content: center; color: var(--jp-ui-font-color1); background: var(--jp-layout-color1); } +.jp-PropertyInspector-content { + flex-grow: 1; +} + .jp-PropertyInspector-placeholder { + display: flex; + align-items: center; + justify-content: center; +} + +.jp-PropertyInspector-placeholderContent { padding: 8px; }