reworked inspector tag editor

css/app.css

@@ -1156,35 +1156,35 @@ div.combobox {
 }
 
 .tag-row {
-    width: 80%;
+    width: 100%;
     position: relative;
     height: 30px;
 }
 
-.input-wrap {
-    position: relative;
-    margin-top: -1px;
-    }
-
 .tag-row input {
-    width: 50%;
-    border-left: 0;
+    border: 0;
     border-radius: 0;
+    border-bottom: 1px solid #CCC;
+    border-left: 1px solid #CCC;
 }
 
 .tag-row input.key {
+    background-color: #f6f6f6;
     font-weight: bold;
 }
 
-.tag-row:first-child input {
-    border-top: 1px solid #ccc;
+.tag-row input.value {
+    border-right: 1px solid #CCC;
 }
 
+
 .tag-row:first-child input.key {
+    border-top: 1px solid #CCC;
     border-top-left-radius: 4px;
 }
 
 .tag-row:first-child input.value {
+    border-top: 1px solid #CCC;
     border-top-right-radius: 4px;
 }
 
@@ -1192,22 +1192,23 @@ div.combobox {
     border-bottom-right-radius: 4px;
 }
 
-.tag-row input.key {
-    border-left: 1px solid #ccc;
-}
-
 .tag-row button {
     position: absolute;
-    top: 5px;
-    right: -25%;
+    height: 30px;
+    right: -20px;
+    opacity: 0;
+    border-radius: 0;
 }
 
-.tag-row button.tag-help {
-    right: -12.5%;
+.tag-row:hover input.value {
+    border-radius: 0;
+}
+
+.tag-row:hover button {
+    opacity: 1;
 }
 
 .inspector-inner .add-tag {
-    width: 20%;
     height: 30px;
     border-top: 0;
     background: rgba(0,0,0,.5);

js/id/ui/preset_grid.js

@@ -225,7 +225,7 @@ iD.ui.PresetGrid = function(context, entity) {
                 presetinspect.selectAll('*')
                     .style('opacity','0')
                     .transition()
-                    .delay(200)
+                    .delay(100)
                     .duration(200)
                     .style('opacity','1');
             }

js/id/ui/taglist.js

@@ -26,7 +26,7 @@ iD.ui.Taglist = function(context, entity) {
             .attr('class', 'tag-list');
 
         var newTag = wrap.append('button')
-            .attr('class', 'add-tag');
+            .attr('class', 'add-tag col6');
 
         newTag.on('click', function() {
             addTag();
@@ -34,7 +34,7 @@ iD.ui.Taglist = function(context, entity) {
         });
 
         newTag.append('span')
-            .attr('class', 'icon icon-pre-text plus');
+            .attr('class', 'icon plus');
 
         newTag.append('span')
             .attr('class', 'label')
@@ -59,11 +59,8 @@ iD.ui.Taglist = function(context, entity) {
         var row = li.enter().append('li')
             .attr('class', 'tag-row');
 
-        var inputs = row.append('div')
-            .attr('class', 'input-wrap');
-
-        inputs.append('span')
-            .attr('class', 'key-wrap')
+        row.append('div')
+            .attr('class', 'key-wrap col6')
             .append('input')
             .property('type', 'text')
             .attr('class', 'key')
@@ -74,8 +71,8 @@ iD.ui.Taglist = function(context, entity) {
                 event.change(taglist.tags());
             });
 
-        inputs.append('span')
-            .attr('class', 'input-wrap-position')
+        row.append('div')
+            .attr('class', 'input-wrap-position col6')
             .append('input')
             .property('type', 'text')
             .attr('class', 'value')
@@ -87,15 +84,7 @@ iD.ui.Taglist = function(context, entity) {
             })
             .on('keydown.push-more', pushMore);
 
-        inputs.each(bindTypeahead);
-
-        var removeBtn = row.append('button')
-            .attr('tabindex', -1)
-            .attr('class','remove minor')
-            .on('click', removeTag);
-
-        removeBtn.append('span')
-            .attr('class', 'icon delete');
+        row.each(bindTypeahead);
 
         function findLocal(docs) {
             var locale = iD.detect().locale.toLowerCase(),