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/section-nav.css

@@ -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).