preset style/layout cleanup.

css/app.css

@@ -290,6 +290,7 @@ form.hide {
 .content {
     border-radius: 4px;
     box-shadow: 0 0 30px 0px rgba(0, 0, 0, 0.7);
+    overflow: hidden;
 }
 
 .pad1    {padding: 10px;}
@@ -567,22 +568,25 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
     display:none;
     max-width: 500px;
     position: relative;
+    border-radius: 0 0 0 4px;
+    overflow: hidden;
 }
 
 .inspector-body {
     overflow: auto;
     max-height: 480px;
+    min-height: 360px;
 }
 
 .inspector-inner {
     padding: 20px;
-    border-bottom: 1px solid #ccc;
     position: relative;
 }
 
 .inspector-inner.message {
     height: 60px;
     padding: 10px;
+    border-bottom: 1px solid #ccc;
 }
 
 .inspector-inner.message h3 {
@@ -599,22 +603,23 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 
 /* preset form */
 
+.preset-section.inspector-inner:last-child { 
+    border-bottom: 1px solid #ccc;
+}
+
 .inspector-body .name-help,
 .inspector-body .type-help {
   position: absolute;
   right: -10px;
 }
 
-.inspector-body .type button {
-    height: 125px;
-}
-
 .inspector-body .name {
-    height: 125px;
+    height: 120px;
 }
 
 .preset-grid-search-wrap {
     height: 60px;
+    border-bottom: 1px solid #ccc;
 }
 
 .preset-grid-search-wrap .icon {
@@ -892,6 +897,7 @@ div.combobox {
     border-right: 1px solid #ccc;
     border-bottom: 1px solid #ccc;
     border-radius: 0;
+    overflow: hidden;
 }
 
 .grid-inner {
@@ -904,19 +910,27 @@ div.combobox {
 
 .grid-entry:hover .preset-help {
     display: block;
-    border-radius: 4px 0 0 0;
+    border-radius: 0;
 }
 
 .grid-entry .preset-help {
     display: none;
     position: absolute;
-    bottom: 0px;
-    right: 0px;
+    bottom: 0;
+    right: 0;
+    height: 30px;
+    width: 30px;
+    background: rgba(0,0,0,.5);
+}
+
+.grid-entry .preset-help:hover {
+    background: rgba(0,0,0,.9);
 }
 
 .preset-inspect {
   position: relative;
-  background: #fff;
+  background: white;
+  border-bottom: 1px solid #ccc;
 }
 
 .grid-entry .preset-icon-fill.area {
@@ -940,17 +954,14 @@ div.combobox {
     text-align: center;
     display: block;
     position: absolute;
-    top: 60%;
-    width: 80%;
+    padding: 5px;
+    bottom: 0;
     left: 0; right: 0;
     margin: auto;
     white-space: nowrap;
     text-overflow: ellipsis;
     overflow: hidden;
-}
-
-.inspector-body-line .grid-entry .label {
-  top: 80%;
+    border-top: 1px solid rgba(0, 0, 0, .1);
 }
 
 /* Preset icon colors */

js/id/ui/inspector.js

@@ -6,16 +6,13 @@ iD.ui.Inspector = function(context) {
     function inspector(selection) {
         var entity = selection.datum();
 
-        var inspectorbody = selection.append('div')
-            .attr('class', 'fillL');
-
         var presetGrid = iD.ui.PresetGrid(context)
             .entity(entity)
             .on('close', function() {
                 event.close();
             })
             .on('choose', function(preset) {
-                inspectorbody.call(tagEditor, preset);
+                selection.call(tagEditor, preset);
             });
 
         tagEditor = iD.ui.TagEditor(context)
@@ -27,10 +24,10 @@ iD.ui.Inspector = function(context) {
                 event.close(entity);
             })
             .on('choose', function() {
-                inspectorbody.call(presetGrid, true);
+                selection.call(presetGrid, true);
             });
 
-        inspectorbody.call(initial ? presetGrid : tagEditor);
+        selection.call(initial ? presetGrid : tagEditor);
 
         selection.call(iD.ui.Toggle(true));
     }

js/id/ui/preset.js

@@ -30,7 +30,7 @@ iD.ui.preset = function(context) {
             .data(preset.form)
             .enter()
             .append('div')
-            .attr('class', 'preset-section inspector-inner col12');
+            .attr('class', 'preset-section fillL inspector-inner col12');
 
         sections.each(function(d) {
             var s = d3.select(this);

js/id/ui/preset_grid.js

@@ -20,7 +20,7 @@ iD.ui.PresetGrid = function(context) {
             .attr('class', 'preset-grid-search-wrap inspector-inner');
 
         var grid = selection.append('div')
-            .attr('class', 'preset-grid fillD inspector-body inspector-body-' + entity.geometry(context.graph()))
+            .attr('class', 'preset-grid inspector-body fillL2 inspector-body-' + entity.geometry(context.graph()))
             .call(drawGrid, context.presets().defaults(entity, 12));
 
         searchwrap.append('span').attr('class', 'icon search');
@@ -120,7 +120,7 @@ iD.ui.PresetGrid = function(context) {
 
             entered.append('button')
                 .attr('tabindex', -1)
-                .attr('class', 'preset-help minor')
+                .attr('class', 'preset-help')
                 .on('click', function(d) {
 
                     // Display description box inline
@@ -165,7 +165,7 @@ iD.ui.PresetGrid = function(context) {
                             _.find(data, function(d) { return d.lang === 'en'; });
                         description.text(doc.description);
                         link.attr('href', 'http://wiki.openstreetmap.org/wiki/' + encodeURIComponent(doc.title));
-                        link.text(doc.title);
+                        link.text(t('inspector.reference'));
                     });
                 })
                 .append('span')

js/id/ui/tag_editor.js

@@ -38,7 +38,7 @@ iD.ui.TagEditor = function(context) {
             .text(t('inspector.choose'));
 
         var editorwrap = selection.append('div')
-            .attr('class', 'tag-wrap inspector-body inspector-body-' + entity.geometry(context.graph()));
+            .attr('class', 'tag-wrap inspector-body fillL2 inspector-body-' + entity.geometry(context.graph()));
 
         var headerwrap = editorwrap.append('div').attr('class','col12 head');
 
@@ -57,10 +57,10 @@ iD.ui.TagEditor = function(context) {
         typebutton.node().focus();
 
          var namewrap = headerwrap.append('div')
-             .attr('class', 'name preset-section inspector-inner col9');
+             .attr('class', 'name preset-section fillL inspector-inner col9');
 
         typebutton.append('span')
-            .attr('class','h4')
+            .attr('class','label')
             .text(preset.name);
 
         namewrap.append('h4').text(t('inspector.name'));

locale/en.js

@@ -185,7 +185,8 @@ locale.en = {
         editing: "Editing {type}",
         additional: "Additional tags",
         choose: "What are you adding?",
-        results: "{n} results for {search}"
+        results: "{n} results for {search}",
+        reference: "View on OpenStreetMap Wiki →"
     },
 
     background: {