diff --git a/src/variableinspector.ts b/src/variableinspector.ts index 8519e29..c3bf943 100644 --- a/src/variableinspector.ts +++ b/src/variableinspector.ts @@ -460,7 +460,7 @@ namespace Private { filterType.appendChild(varTypeOption); filterType.appendChild(nameOption); const searchContainer = document.createElement('div'); - searchContainer.className = 'jp-InputGroup filter-search-container'; + searchContainer.className = 'filter-search-container'; const input = document.createElement('jp-text-field') as TextField; input.setAttribute('type', 'text'); input.setAttribute('placeholder', 'Filter out variable'); @@ -494,11 +494,10 @@ namespace Private { const buttonText = document.createElement('div'); buttonText.className = 'filtered-variable-button-text'; buttonText.innerHTML = filterName; - const icon = closeIcon.element({ + closeIcon.element({ container: filterButtonContent }); - filterButtonContent.appendChild(buttonText); - filterButtonContent.appendChild(icon); + filterButtonContent.insertAdjacentElement('afterbegin', buttonText); filteredButton.appendChild(filterButtonContent); filteredButton.className = FILTERED_BUTTON_CLASS; return filteredButton; diff --git a/style/base.css b/style/base.css index d63dda9..8fae7ae 100644 --- a/style/base.css +++ b/style/base.css @@ -10,6 +10,7 @@ margin: auto; width: 100%; color: var(--jp-content-font-color1); + padding: 0 4px; } .jp-VarInspector-table td, @@ -42,7 +43,7 @@ font-size: var(--jp-ui-font-size1); color: var(--jp-content-font-color1); text-align: left; - padding-left: 10px; + padding: 4px 10px; } .filter-container {