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.

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'));