From 9daa34e209dee6ea5f03008213d36c14dad43ccb Mon Sep 17 00:00:00 2001
From: Thomas Heller <thomas.heller@dynatrace.com>
Date: Wed, 12 Feb 2020 15:26:25 +0100
Subject: [PATCH] fix(filter-field): Fixes alignment of filter field tags.

Wrongfully assumed font-smoothing optimization and box-sizing
definitions. Line heights have changed again.

Fixes #573
---
 .../src/filter-field-tag/filter-field-tag.scss      | 13 ++++++++++++-
 components/filter-field/src/filter-field.scss       | 12 ++++++++++++
 2 files changed, 24 insertions(+), 1 deletion(-)

diff --git a/components/filter-field/src/filter-field-tag/filter-field-tag.scss b/components/filter-field/src/filter-field-tag/filter-field-tag.scss
index 822e3f4f40..ee1c4aeeeb 100644
--- a/components/filter-field/src/filter-field-tag/filter-field-tag.scss
+++ b/components/filter-field/src/filter-field-tag/filter-field-tag.scss
@@ -1,8 +1,20 @@
 @import '../../../core/src/style/variables';
 @import '../../../style/font-mixins';
 
+// from "* { Box-sizing: Border-box }
+// FTW" @ https://www.paulirish.com/2012/box-sizing-border-box-ftw/
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
 :host {
   display: flex;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+  box-sizing: border-box;
   height: 24px;
   border: 1px solid $gray-300;
   border-radius: 3px;
@@ -10,7 +22,6 @@
   @include dt-main-font();
   font-size: 12px;
   color: $gray-500;
-  line-height: 22px;
 
   &.dt-filter-field-tag-disabled {
     border-color: $gray-200;
diff --git a/components/filter-field/src/filter-field.scss b/components/filter-field/src/filter-field.scss
index c1974ba693..4bd13f7987 100644
--- a/components/filter-field/src/filter-field.scss
+++ b/components/filter-field/src/filter-field.scss
@@ -5,8 +5,20 @@
 
 $dt-filter-field-inner-height: 30px;
 
+// from "* { Box-sizing: Border-box }
+// FTW" @ https://www.paulirish.com/2012/box-sizing-border-box-ftw/
+*,
+*::before,
+*::after {
+  box-sizing: inherit;
+}
+
 :host {
   display: block;
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
   @include dt-form-control();
 
   // We need to set overflow visible to prevent the outline