enhancement
major
minor
major
minor
major
#29983
View layer: a tab strip wider than its container neither scrolls nor wraps nor collapses into a menu
Observed with 8.0.0-alpha10 and alpha11 (and master of 2026-10-23) in E-Home (haumacher/ehome).
.tl-tabs__list is display: flex; flex-shrink: 0 without any overflow handling (overflow-x: visible). When the tabs are wider than the container (12 project tabs at 1344 px; 7 device tabs in a detail pane of 802 px), the last tabs lie outside the container. They can only be reached because the next scrolling ancestor (a panel body) scrolls horizontally - and selecting such a tab scrolls the whole panel body sideways, so the tab content is cut off at the left (here by 176 px).
Reproduction: <tabs> with ten tabs of long labels in a narrow <panel>; select the last tab.
Expected: the tab strip scrolls on its own (with scroll buttons or a fade), or moves the tabs that do not fit into an overflow menu; the tab content stays aligned.
Lösung
Die Reiterreihe (tl-tabs__list) rollt selbst seitlich, ohne sichtbaren Scrollbalken; kein umgebender Container rollt mehr mit, der Reiterinhalt bleibt bündig. Die Leiste (tl-tabs__strip) trägt die Reiterreihe zwischen zwei Rollknöpfen (tl-tabs__scroll, data-tl-edge="start|end"):
- Passen die Reiter nicht, sind beide Knöpfe da und behalten ihren Platz; ein Knopf, in dessen Richtung nichts mehr verdeckt ist, ist disabled und unsichtbar. Passen die Reiter, sind beide hidden. Rollen ändert so nie die Breite der Reiterreihe.
- Ein Klick rollt um 80 % der sichtbaren Breite (weich, außer bei prefers-reduced-motion). Die Knöpfe sind eine Zeigerhilfe (tabindex="-1"); die Tastatur bleibt bei Pfeilen, Home und End, deren Fokuswechsel nicht mehr die Vorfahren rollt (preventScroll).
- Der gewählte Reiter wird sichtbar gehalten - bei Auswahl (Klick, Tastatur, Server), beim Erscheinen, wenn der Platz der Leiste oder ihr Inhalt sich ändert und wenn der Überlauf beginnt oder endet -, und zwar nur durch scrollLeft der Reiterreihe, nie per scrollIntoView. Ein schon sichtbarer Reiter bewegt nichts.
Das entspricht dem MUI-Adapter (variant="scrollable", scrollButtons="auto").
Technisch:
- CSS und Vertrag der Tabs im Design-System (TopLogic/tl-design-system, components/tabs/), neu erzeugte Kopie unter style/tl-design-system/ in tl-layout-react.
- React-Bridge: Hook useScrollStrip (Rolllogik, allgemein für waagerecht rollende Leisten) und Komponente TabStrip, genutzt von TLTabBar und den Reitern der Picker-Popups (Farbe, Icon). Neue I18N-Schlüssel js.tabs.scrollStart, js.tabs.scrollEnd.
- Demo in tl-demo-react: Demos > Reiterüberlauf (zehn Reiter mit langen Beschriftungen in einem schmalen Bereich neben drei Reitern, die passen).