first pass at re-writing inspector markup.

css/app.css

@@ -54,10 +54,6 @@ a:hover {
     color:#222;
 }
 
-table th {
-    text-align:left;
-}
-
 input[type=text] {
     background-color: white;
     width:150px;
@@ -73,6 +69,19 @@ input[type=text]:focus {
     border-color:#aaa;
 }
 
+/* tables */
+
+table {
+    background-color: white;
+    border-collapse: collapse;
+    width:100%;
+    border-spacing:0;
+}
+
+table th {
+    text-align:left;
+}
+
 /* UI Lists
 ------------------------------------------------------- */
 
@@ -110,15 +119,14 @@ a.selected {
     color: white;
 }
 
+.fl { float: left;}
+.fr { float: right;}
+
 div.hide,
 form.hide {
     display:none;
 }
 
-button:hover form.hide {
-    display: block;
-}
-
 /* Buttons */
 
 button {
@@ -249,6 +257,7 @@ button.action .label {
 }
 
 /* Definitions for every icon */
+
 .icon.browse     { background-position:   0px 0px;}
 .icon.add-place  { background-position: -20px 0px;}
 .icon.add-road   { background-position: -40px 0px;}
@@ -365,12 +374,6 @@ button.Browse .label {
     width:150px;
 }
 
-.inspector-wrap table {
-    border-collapse: collapse;
-    width:100%;
-    border-spacing:0;
-}
-
 .inspector-wrap .tag-table-wrap {
     max-height:350px;
     border-top: 1px solid #ccc;
@@ -383,7 +386,6 @@ button.Browse .label {
 }
 
 .inspector-wrap .buttons {
-    margin-top: 10px;
     border-top: 1px solid #ccc;
 }
 

img/source/sprite.svg

@@ -27,9 +27,9 @@
      borderopacity="1.0"
      inkscape:pageopacity="0.0"
      inkscape:pageshadow="2"
-     inkscape:zoom="16"
-     inkscape:cx="298.70699"
-     inkscape:cy="157.19463"
+     inkscape:zoom="11.313708"
+     inkscape:cx="291.89171"
+     inkscape:cy="165.02789"
      inkscape:document-units="px"
      inkscape:current-layer="layer12"
      showgrid="true"
@@ -141,10 +141,6 @@
        orientation="0,1"
        position="145,60"
        id="guide47496" />
-    <sodipodi:guide
-       orientation="1,0"
-       position="152,428"
-       id="guide47958" />
   </sodipodi:namedview>
   <metadata
      id="metadata12398">

js/id/ui/inspector.js

@@ -58,25 +58,21 @@ iD.Inspector = function() {
             selection.append('div')
                 .attr('class', 'head inspector-inner').call(drawhead);
 
-            var table = selection
-                .append('div').attr('class', 'inspector-inner tag-table-wrap')
-                .append('table').attr('class', 'inspector');
+            var inspectorwrap = selection
+                .append('ul').attr('class', 'inspector-inner tag-table-wrap fillL2')
 
-            table.append('thead').append('tr').selectAll('th')
+            inspectorwrap
                 .data(['tag', 'value', ''])
                 .enter()
-                .append('th').text(String);
-
-            var tbody = table.append('tbody');
 
             function draw(data) {
-                var tr = tbody.selectAll('tr')
+                var tr = inspectorwrap.selectAll('li')
                     .data(d3.entries(data));
                 tr.exit().remove();
-                var row = tr.enter().append('tr');
-                var valuetds = row.selectAll('td')
+                var row = tr.enter().append('li');
+                var valuetds = row.selectAll('input')
                     .data(function(d) { return [d, d]; });
-                valuetds.enter().append('td').append('input')
+                valuetds.enter().append('input')
                     .property('value', function(d, i) { return d[i ? 'value' : 'key']; })
                     .on('keyup.update', function(d, i) {
                         d[i ? 'value' : 'key'] = this.value;
@@ -93,8 +89,8 @@ iD.Inspector = function() {
                                 });
                             }));
                     });
-
-                row.append('td').attr('class', 'tag-help').append('a')
+                row.append('button').attr('class','remove');
+                row.append('a').attr('class', 'tag-help button')
                     .text('?')
                     .attr('target', '_blank')
                     .attr('tabindex', -1)
@@ -118,7 +114,7 @@ iD.Inspector = function() {
             function grabtags() {
                 var grabbed = {};
                 function grab(d) { grabbed[d.key] = d.value; }
-                tbody.selectAll('td').each(grab);
+                inspectorwrap.selectAll('input').each(grab);
                 return grabbed;
             }
 
@@ -145,7 +141,7 @@ iD.Inspector = function() {
                         event.close(entity);
                     });
                 selection.append('button')
-                    .attr('class', 'delete wide action')
+                    .attr('class', 'delete wide action fr')
                     .html("<span class='icon icon-pre-text delete'></span><span class='label'>Delete</span>")
                     .on('click', function(entity) { event.remove(entity); });
             }