Fix some styling issues (#297)

Co-authored-by: Frédéric Collonval <[email protected]>

Author: fcollonval

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;

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 {