enhancement
major
minor
major
minor
major
#29627
TL Views table: an I18NString cell wraps its text and is clipped mid-glyph by the 36 px row instead of ending in an ellipsis; header labels are cut without an ellipsis
Problem
The ticket tables of the issue tracker tl-dev show Ticket#summary, a mandatory tl.model.i18n:I18NString, in a <column attribute="summary"/> of the type-derived width (150 px).
Measured at 1600×900 (engine snapshot build 37 of 2026-09-16), global ticket list: the cell is 150 px wide, its inner text element 117 px (168 px in a table without the filter icon), with white-space: normal and text-overflow: clip. The text wraps to two to five lines (scrollHeight 59 / 78 / 39 / 98 px per row) while the row is 36 px high and .tlTableView__cell is overflow: hidden: only the first line shows, and it is cut through the glyphs of the second line's ascenders. A plain String cell in the same table ends in an ellipsis, as #29497 describes; the I18NString display control does not.
The header labels behave the same way: "Zusammenfassung" renders as "Zusammenf", "Geändert" as "Geänder" and "Geschlossen" as "G" - cut, no ellipsis, no tooltip.
Request
A read-only cell over an I18NString (and every other display control that would wrap) is one line ending in an ellipsis, like a String cell; the column header label is one line ending in an ellipsis. The full text is reached through the cell tooltip of #29497.
Not part of this ticket: the default width of the column, which the app sets through <column width="…"> (#29553).
Analyse
Gemessen im React-Demo (tl-demo-react, master vom 2026-09-21, 1600×900):
- Die Spaltenüberschrift kürzt bereits mit Ellipse: .tlTableView__headerLabel hat white-space: nowrap, overflow: hidden, text-overflow: ellipsis seit der ersten Fassung der Tabelle. Nur eine Überschrift unter ca. 10 px Breite zeigt keine „…“, weil die Ellipse selbst keinen Platz hat.
- Jede schreibgeschützte Zelle umbricht, auch eine String-Zelle: Das Wert-Element (span.tlReactTextInput--immutable) ist per .tlTableView__cell > span ein Block mit white-space: normal und overflow: visible. Langer Text umbricht auf mehrere Zeilen, die Zeile (overflow: hidden, feste Höhe) schneidet ihn oben und unten durch die Glyphen. Ein String endet auf master also ebenso wenig mit Ellipse wie ein I18NString.
- Die I18NString-Zelle ist zusätzlich waagerecht abgeschnitten: Der Anzeige-Control ist in die Zeile mit der (verborgenen) Sprachen-Schaltfläche eingebettet (div.tlStack--row, min-width: auto), die mit der Spalte nicht schmaler wird.
- Ein mehrzeiliger Text setzt white-space: pre-wrap als Inline-Style, den kein Stylesheet überschreiben kann; eine mehrwertige Werteliste in Blockdarstellung stapelt ihre Werte.
Lösung
Ausschließlich Stylesheet der Tabelle (tlReactControls.css, Modul com.top_logic.layout.react) und zwei kleine Client-Änderungen; kein serverseitiger Code:
- Eine Zelle ist eine Zeile: white-space: nowrap auf .tlTableView__cell, das jeder Anzeige-Control darin erbt.
- Das Wert-Element endet mit Ellipse: die Regel .tlTableView__cell > span erhält overflow: hidden und text-overflow: ellipsis. Ein schreibgeschützter Link (URL, E-Mail, Telefon, .tlTableView__cell > a) endet ebenso mit Ellipse, behält aber die Breite seines Textes, damit ein Klick neben den Text die Zeile auswählt statt der Adresse zu folgen.
- Die Zeile mit Adornment (I18NString) wird mit der Spalte schmaler: min-width: 0 und volle Breite auf .tlStack--row in einer Zelle, Ellipse auf ihrem ersten Kind. Nur in Zellen wirksam, Formularfelder bleiben unverändert.
- Schreibgeschützte Chip-Zeilen (Mehrfachauswahl) bleiben in einer Reihe und werden am Zellrand abgeschnitten statt umzubrechen; die Chips behalten ihre Breite.
- TLTextInput: das pre-wrap der mehrzeiligen Anzeige wandert vom Inline-Style in die Klassenregel .tlReactTextInput--immutable.tlReactTextInput--multiline, die die Zelle mit nowrap überschreibt.
- TLValueList: der Trenner wird immer gerendert und in der Blockdarstellung per CSS verborgen; in einer Zelle zeigt die Blockdarstellung ihre Werte einzeilig mit Trenner.
- Überschrift: keine Änderung nötig.
Das React-Demo zeigt in der Tabelle „Attribute“ zusätzlich die Spalten multiLine, i18n und i18nMultiline.
Der Tooltip mit dem vollen Text (#29497) bleibt ein eigenes Ticket.