more work on new preset layout.

css/app.css

@@ -582,7 +582,6 @@ a.selected:hover .toggle.icon  { background-position: -40px -180px;}
 .inspector-inner {
     padding: 20px;
     position: relative;
-    border-left: 1px solid #ccc;
 }
 
 .inspector-inner.message {
@@ -799,11 +798,29 @@ div.combobox {
     opacity: 1;
 }
 
-.preset-radio button {
-    margin-top: 40px;
+/* Radio buttons */
+
+.radio-wrap { 
+    display: block;
+    padding: 30px 0 0 0;
+    border-radius: 4px;
+    box-sizing: border-box;
+    color: #999;
+    border: 1px solid #CCC;
+    overflow: hidden;
+}
+
+.radio-wrap button {
     font-weight: normal;
     padding: 2px 10px;
     height: 30px;
+    border-radius: 0;
+    border-right: 1px solid #CCC;
+    width: 20%;
+}
+
+.radio-wrap button:last-child { 
+    border-right: 0;
 }
 
 /* Address input */
@@ -832,10 +849,6 @@ div.combobox {
 
 /* tag editor */
 
-.tag-wrap .grid-entry { 
-    border-right: 0;
-}
-
 .tag-list {
     margin-top: 10px;
 }

js/id/ui/preset.js

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

js/id/ui/preset/combo.js

@@ -1,18 +1,20 @@
 iD.ui.preset.combo = function(form) {
 
     var event = d3.dispatch('change', 'close'),
+        wrap,
         input;
 
     function combo(selection) {
 
+        wrap = this.append('span').attr('class', 'input-wrap-position');
 
-        input = this.append('input')
+        input = wrap.append('input')
             .attr('type', 'text')
             .on('change', change)
             .on('blur', change);
 
         var combobox = d3.combobox();
-        input.call(combobox);
+        wrap.call(combobox);
 
         if (form.options) {
             options(form.options);

js/id/ui/preset/radio.js

@@ -8,7 +8,9 @@ iD.ui.preset.radio = function(form) {
 
         selection.classed('preset-radio', true);
 
-        buttons = selection.selectAll('button')
+        var buttonwrap = selection.append('div').attr('class','radio-wrap');
+
+        buttons = buttonwrap.selectAll('button')
             .data(form.options)
             .enter()
             .append('button')
@@ -18,7 +20,7 @@ iD.ui.preset.radio = function(form) {
                     d3.select(this).classed('active', true);
                     change();
                 });
-        selection.append('button')
+        buttonwrap.append('button')
             .on('click', function() {
                 buttons.classed('active', false);
                 change();

js/id/ui/tag_editor.js

@@ -84,7 +84,7 @@ iD.ui.TagEditor = function(context) {
             .on('change', changeTags);
 
         var tageditorpreset = editorwrap.append('div')
-            .attr('class', 'inspector-preset cf fillL');
+            .attr('class', 'inspector-preset cf fillL col12');
 
         if (preset) {
             tageditorpreset.call(presetUI

js/id/ui/taglist.js

@@ -75,7 +75,9 @@ iD.ui.Taglist = function(context) {
                 event.change(taglist.tags());
             });
 
-        inputs.append('input')
+        inputs.append('span')
+            .attr('class', 'input-wrap-position')
+            .append('input')
             .property('type', 'text')
             .attr('class', 'value')
             .attr('maxlength', 255)