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

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>

resources/css/components/tabs.css

@@ -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] {