Fixed: tag input alignment and height

frontend/src/Components/Form/TagInput.css

@@ -8,13 +8,13 @@
   &.isFocused {
     outline: 0;
     border-color: $inputFocusBorderColor;
-    box-shadow: inset 0 1px 1px $inputBoxShadowColor, 0 0 8px $inputFocusBoxShadowColor;
+    box-shadow: inset 0 1px 1px $inputBoxShadowColor,
+      0 0 8px $inputFocusBoxShadowColor;
   }
 }
 
 .internalInput {
   flex: 1 1 0%;
-  margin-top: -6px;
   margin-left: 3px;
   min-width: 20%;
   max-width: 100%;

frontend/src/Components/Form/TagInputInput.css

@@ -4,8 +4,9 @@
   bottom: -1px;
   left: -1px;
   display: flex;
+  align-items: start;
   flex-wrap: wrap;
-  padding: 6px 16px;
-  height: 33px;
+  padding: 1px 16px;
+  min-height: 33px;
   cursor: default;
 }

frontend/src/Components/Form/TagInputTag.css

@@ -0,0 +1,5 @@
+.tag {
+  composes: link from "~Components/Link/Link.css";
+
+  height: 31px;
+}

frontend/src/Components/Form/TagInputTag.js

@@ -4,6 +4,7 @@ import { kinds } from 'Helpers/Props';
 import tagShape from 'Helpers/Props/Shapes/tagShape';
 import Label from 'Components/Label';
 import Link from 'Components/Link/Link';
+import styles from './TagInputTag.css';
 
 class TagInputTag extends Component {
 
@@ -31,9 +32,9 @@ class TagInputTag extends Component {
       tag,
       kind
     } = this.props;
-
     return (
       <Link
+        className={styles.tag}
         tabIndex={-1}
         onPress={this.onDelete}
       >