Merge pull request #1487 from hypothesis/tag-input-tweaks-alt

Prevent tag input field from changing height

h/static/styles/tags-input.scss

@@ -2,6 +2,7 @@
 // http://mbenford.github.io/ngTagsInput/gettingstarted
 
 @import "mixins/forms";
+@import "compass/css3/user-interface";
 
 tags-input {
   .host {
@@ -10,7 +11,7 @@ tags-input {
 
   .tags {
     @include form-input;
-    @include clearfix;
+    @include pie-clearfix;
 
     &.focused {
       @include form-input-focus;
@@ -19,23 +20,28 @@ tags-input {
     // Input
     .input {
       float: left;
-      margin-top: .1875em;
-      padding: .2em 0;
+      padding: .1333em 0;
       outline: none;
       border: none !important;
       background: none;
       color: $gray;
+
+      // Firefox and Webkit render input boxes at different heights. This
+      // causes issues when the tags (which render consistentely) are inserted
+      // and cause the height of the faux input to jump.
+      height: 1.4667em;
     }
   }
 
   .tag-list {
     margin-top: -.33em; // Absorb the first row of margin-top on the tags.
+    float: left;
   }
 
   .tag-item {
     float: left;
     position: relative;
-    padding: .154em 1.307em .154em .538em;
+    padding: .0769em 1.307em .0769em .538em;
     margin-top: .384em;
     margin-right: .384em;
     font-size: .866em;
@@ -49,15 +55,16 @@ tags-input {
     }
 
     .remove-button {
+      @include user-select(none);
       display: block;
       position: absolute;
       top: 0;
       right: 0;
       bottom: 0;
-      width: 16px;
-      font-size: 17px;
+      width: .9412em;
+      font-size: 1.3077em;
       font-weight: bold;
-      line-height: 1.2;
+      line-height: 1;
       text-align: center;
       color: #585858;
       cursor: pointer;
@@ -66,7 +73,7 @@ tags-input {
 }
 
 .tags-read-only {
-  font-size: 11px;
+  font-size: .8461em;
   margin: .4545em 0;
 
   .tag-list {