noNameWEB/livewire-material
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Wrap a fixed tab's long label to a second line

Browse Source 
Plan step 46, M3 § Tabs: "Labels: single row by default; may wrap to a
max second line if needed with truncation, or use scrollable tabs to
give longer titles more room." In fixed tabs (<x-tabs>, <x-section-nav>
up to four sections) the label's text, now its own data-md-tab-text in
both views, wraps and truncates at two lines. The tab's 48px (64px
stacked) is a minimum, the bar stretches its tabs to one height, and the
content stretches with them, so the indicator stays on the divider.
Scrollable tabs keep one row. SealShare's "Two-Factor Auth" and
"Appearance" showed an ellipsis at 600px.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andreas Reinhold / reini
2026-09-15 16:10:13 +02:00
co-authored by Claude Opus 5
parent 0a028b158f
commit 5b05e52e1c
6 changed files with 152 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/css/components/section-nav.css
+5 -2
View File
@@ -16,8 +16,11 @@
* `aria-current="page"` takes the same active indicator and colour tabs.css already draws for
* `aria-selected="true"` (N-21), so nothing here repeats a rule tabs.css owns; the only addition is
* this bar's own list items — flex rows, so tabs.css's `li > [data-md-tab]` share of the width
* applies, and `min-inline-size: 0`, so a long title still truncates — which `<x-tabs>`'s buttons,
* direct children of the bar, never need. The picker's trigger is not one of M3's controls
* applies, and `min-inline-size: 0`, so a long title in a fixed row wraps to its second line and
* truncates there (tabs.css, M3's "may wrap to a max second line if needed with truncation")
* instead of widening its item — which `<x-tabs>`'s buttons, direct children of the bar, never
* need. Its tabs render `<x-tabs>`'s label anatomy (`data-md-tab-label` around
* `data-md-tab-text`), so that rule draws both. The picker's trigger is not one of M3's controls
* — an outlined field-like button naming the current section, 48px tall to meet the target M3 asks
* for everywhere, in body-large type (a text class on the view, `md-type-body-lg
* md-ink md-text-start`, since it is prose on a plain button rather than a component's own type).
resources/css/components/tabs.css
+31 -5
View File
@@ -1,8 +1,8 @@
/*
* `<x-tabs>`, `<x-tab>`: M3's tabs (PrimaryNavigationTabTokens.kt, SecondaryNavigationTabTokens.kt,
* androidx Compose Material 3, Apache-2.0; docs/reference/m3/components-navigation-selection-inputs.md
* § Tabs) — a 48px tablist on the surface over an outline-variant divider (64px when a primary tab
* stacks its icon over its label), title-small labels in on-surface-variant, the chosen tab's in
* § Tabs) — a tablist of tabs at least 48px tall on the surface over an outline-variant divider
* (64px when a primary tab stacks its icon over its label), title-small labels in on-surface-variant, the chosen tab's in
* primary (primary tabs) or on-surface (secondary tabs).
*
* [data-md-tabs] min-width: 0
@@ -11,8 +11,18 @@
* [data-md-tab] role="tab"
* [data-md-tab-content] [data-md-icon] (optional), [data-md-tab-label],
* [data-md-tab-indicator]
* [data-md-tab-label] [data-md-tab-text], [data-md-badge] (optional)
* [data-md-tab-panel] role="tabpanel", hidden server-side until chosen (N-05)
*
* "Labels: single row by default; may wrap to a max second line if needed with truncation, or use
* scrollable tabs to give longer titles more room" (§ Tabs, "Behaviour and guidelines"). A fixed
* tab shares the row equally, so its label keeps one row while it fits its share, then wraps to a
* second line and truncates that one with an ellipsis. 48px (64px stacked) is the tab's minimum,
* not its height: the tab grows to hold the second line, and the bar's flex row stretches every
* tab to the tallest, so the tabs keep one height, each content box fills its tab, and every
* indicator stays on the divider under its tab's content. A scrollable tab is as wide as its label
* and keeps it on one row, the room M3 gives longer titles instead.
*
* The active indicator is drawn in every tab and shown under the chosen one, so it is right before
* Alpine starts and after a morph: 3px with rounded top corners under the content of a primary tab
* (at least 24px wide, inset 2px at each side — N-18), 2px across the whole of a secondary one.
@@ -73,7 +83,7 @@
display: flex;
flex: 1 1 0%;
min-width: 90px;
height: 48px;
min-height: 48px;
align-items: center;
justify-content: center;
padding-inline: var(--md-sys-measurement-space200);
@@ -94,7 +104,7 @@
}
[data-md-tabs-bar][data-md-stacked] [data-md-tab] {
height: 64px;
min-height: 64px;
}
/* The state layer covers the tab and the ring's room around it, so the wash meets the divider. */
@@ -149,10 +159,12 @@
background-color: transparent;
}
/* Stretched rather than 100% tall, so it fills a tab that grew past its minimum too, and the
primary indicator at its foot lands on the divider in every tab of the bar. */
[data-md-tab-content] {
position: relative;
display: inline-flex;
height: 100%;
align-self: stretch;
min-width: 24px;
align-items: center;
justify-content: center;
@@ -166,10 +178,24 @@
[data-md-tab-label] {
display: inline-flex;
min-width: 0;
align-items: center;
gap: var(--md-sys-measurement-space75);
}
/* A fixed tab's label: one row while it fits, then a second, truncated (the M3 line above).
The tab's own nowrap still holds the badge and a scrollable tab's label to one row. */
[data-md-tabs-bar]:not([data-md-scrollable]) [data-md-tab-text] {
display: -webkit-box;
min-width: 0;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
text-align: center;
text-overflow: ellipsis;
white-space: normal;
}
/* Primary indicators are inset 2dp at each side (N-18); both variants sit on the divider, which
the ring's room has pushed below the tab. */
[data-md-tab-indicator] {