From 30b5a35db2425619162467043b3d0eebd0af341b Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Sun, 21 Jul 2019 18:22:34 -0700
Subject: [PATCH] Fixed: tag input alignment and height

---
 frontend/src/Components/Form/TagInput.css      | 4 ++--
 frontend/src/Components/Form/TagInputInput.css | 5 +++--
 frontend/src/Components/Form/TagInputTag.css   | 5 +++++
 frontend/src/Components/Form/TagInputTag.js    | 3 ++-
 4 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/Components/Form/TagInputTag.css

diff --git a/frontend/src/Components/Form/TagInput.css b/frontend/src/Components/Form/TagInput.css
index 531aec0de..6bbf5b7e9 100644
--- a/frontend/src/Components/Form/TagInput.css
+++ b/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%;
diff --git a/frontend/src/Components/Form/TagInputInput.css b/frontend/src/Components/Form/TagInputInput.css
index 4cdb45725..292f1a089 100644
--- a/frontend/src/Components/Form/TagInputInput.css
+++ b/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;
 }
diff --git a/frontend/src/Components/Form/TagInputTag.css b/frontend/src/Components/Form/TagInputTag.css
new file mode 100644
index 000000000..3e96de5da
--- /dev/null
+++ b/frontend/src/Components/Form/TagInputTag.css
@@ -0,0 +1,5 @@
+.tag {
+  composes: link from "~Components/Link/Link.css";
+
+  height: 31px;
+}
diff --git a/frontend/src/Components/Form/TagInputTag.js b/frontend/src/Components/Form/TagInputTag.js
index 8d650702b..f5935ad7b 100644
--- a/frontend/src/Components/Form/TagInputTag.js
+++ b/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}
       >