Merge pull request #594 from prymitive/cleanup-input-css

fix(ui): cleanup filter input css classes

ui/src/Components/Labels/FilterInputLabel/index.css

@@ -5,6 +5,12 @@
   /* fix align after text-truncate */
   vertical-align: middle;
 
+  padding-top: 0.15rem;
+  padding-bottom: 0.15rem;
+  padding-left: 0.15rem;
+
+  min-height: 1.5rem;
+
   /* ensure there's some space between filters
      if there are multiple rows in the input */
   margin-top: 1px;
@@ -16,7 +22,6 @@
   /* match outer badge font size */
   font-size: 90%;
   line-height: 100%;
-  padding-bottom: 0.1em;
 
   /* we have badge inside a badge, make the inner one a little brighter
      in case both use same color classes */

ui/src/Components/Labels/FilterInputLabel/index.js

@@ -76,7 +76,7 @@ const FilterInputLabel = observer(
                 </span>
               ) : null
             ) : (
-              <span className="badge mr-1 p-0">
+              <span className="badge mr-1">
                 <FontAwesomeIcon icon={faSpinner} spin />
               </span>
             )
@@ -87,7 +87,6 @@ const FilterInputLabel = observer(
           )}
           <TooltipWrapper title="Click to edit this filter" className="my-auto">
             <RIEInput
-              className="align-middle"
               defaultValue=""
               value={filter.raw}
               propName="raw"
@@ -97,7 +96,7 @@ const FilterInputLabel = observer(
           </TooltipWrapper>
           <button
             type="button"
-            className="close ml-1 align-middle"
+            className="close ml-1"
             style={filter.applied ? cs.style : {}}
             onClick={() => alertStore.filters.removeFilter(filter.raw)}
           >