From 7957aacc68211d8503a8318fca703647d7718c52 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C5=81ukasz=20Mierzwa?= <l.mierzwa@gmail.com>
Date: Sun, 7 Apr 2019 18:43:02 +0100
Subject: [PATCH] fix(ui): cleanup filter input css classes

Text is not aligned properly on macOS/chrome and spinner for unapplied filters is moved to the top
---
 ui/src/Components/Labels/FilterInputLabel/index.css | 7 ++++++-
 ui/src/Components/Labels/FilterInputLabel/index.js  | 5 ++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/ui/src/Components/Labels/FilterInputLabel/index.css b/ui/src/Components/Labels/FilterInputLabel/index.css
index eb22f0467..1213fd947 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.css
+++ b/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 */
diff --git a/ui/src/Components/Labels/FilterInputLabel/index.js b/ui/src/Components/Labels/FilterInputLabel/index.js
index 9256a066f..db349321e 100644
--- a/ui/src/Components/Labels/FilterInputLabel/index.js
+++ b/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)}
           >