Improve combobox dropdown styling to give labels more room and readability (#10127)

* Fields: Break long lines in combo dropdown instead of ellipsis

Longer translations keys are not readable with ellipsis and the tooltip only shows the description (or fallback), not the title.

This change makes long use line breaks with small line height to make the whole text visible.

* Fields: Use table styles for rows to maximize available space

The flex box solution gave a lot of space to the label. This solution minimizes that space to give more space to the values dropdown.

Author: tordans

css/80_app.css

@@ -1585,11 +1585,11 @@ input.date-selector {
     display: flex;
     flex-flow: row nowrap;
 }
-.form-field ul.rows li.labeled-input > span,
 .form-field ul.rows li.labeled-input > div {
     flex: 1 1 auto;
     width: 100%;
     border-radius: 0;
+    line-height: 0.95rem;
 }
 .form-field ul.rows li input {
     border-radius: 0;
@@ -1608,6 +1608,28 @@ input.date-selector {
     border-right-width: 1px;
 }
 
+/* Field - lists with labeled input items as table
+------------------------------------------------------- */
+.form-field ul.rows.rows-table {
+    display: table;
+    width: 100%;
+}
+.form-field ul.rows.rows-table li.labeled-input {
+    display: table-row;
+}
+.form-field ul.rows.rows-table li.labeled-input > div:first-child {
+    display: table-cell;
+    width: auto;
+    max-width: 170px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+}
+.form-field ul.rows.rows-table li.labeled-input > div:nth-child(2) {
+    display: table-cell;
+    width: auto;
+}
+
 
 /* Field - Structure
 ------------------------------------------------------- */
@@ -2354,9 +2376,8 @@ div.combobox {
     display: block;
     padding: 5px 10px;
     border-top: 1px solid #ccc;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    overflow: hidden;
+    line-height: 0.95rem;
+    break: all;
 }
 
 .combobox a.selected,

modules/ui/fields/access.js

@@ -37,7 +37,7 @@ export function uiFieldAccess(field, context) {
             .attr('class', function(d) { return 'labeled-input preset-access-' + d; });
 
         enter
-            .append('span')
+            .append('div')
             .attr('class', 'label preset-label-access')
             .attr('for', function(d) { return 'preset-input-access-' + d; })
             .html(function(d) { return field.t.html('types.' + d); });

modules/ui/fields/directional_combo.js

@@ -43,7 +43,7 @@ export function uiFieldDirectionalCombo(field, context) {
 
         div = div.enter()
             .append('ul')
-            .attr('class', 'rows')
+            .attr('class', 'rows rows-table')
             .merge(div);
 
         items = div.selectAll('li')
@@ -54,7 +54,7 @@ export function uiFieldDirectionalCombo(field, context) {
             .attr('class', function(d) { return 'labeled-input preset-directionalcombo-' + stripcolon(d); });
 
         enter
-            .append('span')
+            .append('div')
             .attr('class', 'label preset-label-directionalcombo')
             .attr('for', function(d) { return 'preset-input-directionalcombo-' + stripcolon(d); })
             .html(function(d) { return field.t.html('types.' + d); });

modules/ui/fields/radio.js

@@ -127,7 +127,7 @@ export function uiFieldRadio(field, context) {
             .attr('class', 'labeled-input structure-type-item');
 
         typeEnter
-            .append('span')
+            .append('div')
             .attr('class', 'label structure-label-type')
             .attr('for', 'preset-input-' + selected)
             .call(t.append('inspector.radio.structure.type'));
@@ -172,7 +172,7 @@ export function uiFieldRadio(field, context) {
             .attr('class', 'labeled-input structure-layer-item');
 
         layerEnter
-            .append('span')
+            .append('div')
             .attr('class', 'label structure-label-layer')
             .attr('for', 'preset-input-layer')
             .call(t.append('inspector.radio.structure.layer'));