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

components/filter-field/src/filter-field-tag/filter-field-tag.scss

@@ -1,16 +1,27 @@
 @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;
   background-color: $gray-130;
   @include dt-main-font();
   font-size: 12px;
   color: $gray-500;
-  line-height: 22px;
 
   &.dt-filter-field-tag-disabled {
     border-color: $gray-200;

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