Made the value chips in the Destinations semiCombo field full-width to mimic the layout of highway signs (re: #4178)

The input and combobox caret elements in the multicombo field value list are now wrapped in a li element for consistency

css/80_app.css

@@ -1422,50 +1422,62 @@ img.tag-reference-wiki-image {
 }
 
 .form-field-input-multicombo ul.chiplist {
-    padding: 5px 0 5px 10px;
+    padding: 5px 7px 5px 7px;
     background: #fff;
     display: block;
     border-radius: 0 0 4px 4px;
 }
 
 .form-field-input-multicombo li.chips {
+    background-color: #eff2f7;
+    border: 1px solid #ccd5e3;
+    line-height: 25px;
+    padding: 2px 0px 2px 5px;
+}
+.form-field-input-multicombo li {
     display: inline-flex;
     flex-flow: row nowrap;
     align-items: center;
-    background-color: #eff2f7;
-    border: 1px solid #ccd5e3;
-    border-radius: 4px;
-    line-height: 25px;
-    padding: 2px 5px;
     margin: 3px;
+    border-radius: 4px;
 }
 
 .form-field-input-multicombo a {
     font-family: Arial, Helvetica, sans-serif !important;
     font-size: 16px !important;
-    line-height: 24px;
+    line-height: 22px;
     float: right;
-    margin: 1px 0 0 5px;
-    padding: 0;
+    padding: 0px 5px 0px 5px;
+    margin: 0;
     cursor: pointer;
     color: #a6b4ce;
 }
 
-.form-field-input-multicombo input {
+.form-field-input-multicombo .input-wrap {
     border: 1px solid #ddd;
     width: 100px;
-    margin: 3px;
     height: 31px;
+    overflow: hidden;
 }
-
-.form-field-input-multicombo .combobox-caret {
-    margin: 3px 3px 3px -30px;
+.form-field-input-multicombo input {
+    border: none;
+    width: 100%;
 }
 
 .form-field-input-multicombo input:focus {
     border-radius: 4px !important;
 }
 
+.form-field-input-multicombo .full-line-chips li {
+    display: block;
+}
+.form-field-input-multicombo .full-line-chips li:not(:last-child) {
+    margin-bottom: 6px;
+}
+.form-field-input-multicombo .full-line-chips .input-wrap {
+    width: auto;
+}
+
 
 /* Field - Text / Numeric
 ------------------------------------------------------- */

modules/ui/fields/combo.js

@@ -42,6 +42,7 @@ export function uiFieldCombo(field, context) {
         .caseSensitive(caseSensitive)
         .minItems(isMulti || isSemi ? 1 : 2);
     var container = d3_select(null);
+    var inputWrap = d3_select(null);
     var input = d3_select(null);
     var _comboData = [];
     var _multiData = [];
@@ -292,17 +293,37 @@ export function uiFieldCombo(field, context) {
             container = container.selectAll('.chiplist')
                 .data([0]);
 
+            var listClass = 'chiplist';
+            
+            // Use a separate line for each value in the Destinations field
+            // to mimic highway exit signs
+            if (field.id === 'destination_oneway') {
+                listClass += ' full-line-chips';
+            }
+
             container = container.enter()
                 .append('ul')
-                .attr('class', 'chiplist')
+                .attr('class', listClass)
                 .on('click', function() {
                     window.setTimeout(function() { input.node().focus(); }, 10);
                 })
                 .merge(container);
-        }
 
-        input = container.selectAll('input')
-            .data([0]);
+
+            inputWrap = container.selectAll('.input-wrap')
+                .data([0]);
+
+            inputWrap = inputWrap.enter()
+                .append('li')
+                .attr('class', 'input-wrap')
+                .merge(inputWrap);
+
+            input = inputWrap.selectAll('input')
+                .data([0]);
+        } else {
+            input = container.selectAll('input')
+                .data([0]);
+        }
 
         input = input.enter()
             .append('input')
@@ -395,7 +416,7 @@ export function uiFieldCombo(field, context) {
                 .remove();
 
             var enter = chips.enter()
-                .insert('li', 'input')
+                .insert('li', '.input-wrap')
                 .attr('class', 'chips');
 
             enter.append('span');