From ce51b33cf2a697df1633235581bc246be6d4d5f9 Mon Sep 17 00:00:00 2001
From: Tobias <tobias@fixmycity.de>
Date: Mon, 26 Feb 2024 14:02:22 +0100
Subject: [PATCH] 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.
---
 css/80_app.css                         | 29 ++++++++++++++++++++++----
 modules/ui/fields/access.js            |  2 +-
 modules/ui/fields/directional_combo.js |  4 ++--
 modules/ui/fields/radio.js             |  4 ++--
 4 files changed, 30 insertions(+), 9 deletions(-)

diff --git a/css/80_app.css b/css/80_app.css
index b0ab5c7ff..efe5b4166 100644
--- a/css/80_app.css
+++ b/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,
diff --git a/modules/ui/fields/access.js b/modules/ui/fields/access.js
index 7342679c3..b9867aae4 100644
--- a/modules/ui/fields/access.js
+++ b/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); });
diff --git a/modules/ui/fields/directional_combo.js b/modules/ui/fields/directional_combo.js
index 9491cc5fb..9fea3b5d5 100644
--- a/modules/ui/fields/directional_combo.js
+++ b/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); });
diff --git a/modules/ui/fields/radio.js b/modules/ui/fields/radio.js
index c7cd14edb..6ea245245 100644
--- a/modules/ui/fields/radio.js
+++ b/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'));