[MaggieAppleton]

Authored tabs remain on one line, show the full label on hover, and fade strip edges where more tabs are hidden. The selected tab stays in view; smooth scrolling respects reduced motion.

Clean rebase preserved all three patches. Local checks, types, three geometry unit tests and all 11 responsive-content/document-tab-stability browser tests pass. Corrected the original description’s local image paths to its existing GitHub attachments. Final CI is running.

Original proposal and screenshots

Why

Overflowing authored tabs were hard-clipped at the pane edge with no hint that more tabs exist, and on a phone a long label wrapped and was cut mid-word.

What changed

• Tabs never wrap: single line, max-w-64, ellipsis, full label in title.
• The strip fades out on whichever side has more content (CSS mask from --spacing token, updated on scroll and resize). Pure helper tab-edges.ts with unit tests.
• Smooth scroll for reveal, disabled under prefers-reduced-motion. Selected tab is still revealed on load and selection; arrow/Home/End unchanged.

Screenshots

Before 1440 (last tab selected):

After 1440:

Before 390:

After 390:

Testing

• bun test packages/editor/src/widgets/tab-edges.test.ts pass
• bun run ci, bun run types pass
• Checked in headless Chromium at 1440 and 390 against the stress document. Local e2e suspended; existing tab specs (responsive-content, document-tab-stability) left to CI.

🤖 Generated with Claude Code

[MaggieAppleton]

Review: Looks good

Checked in headless Chromium on the stress doc (6 long tabs) at 1440x900 and 390x844, plus reduced motion. CI is green and tab-edges.test.ts passes.

Works:

• Single line, 16rem cap with ellipsis; title carries the full label.
• Fade is on the end only at scrollLeft 0, both sides mid-strip, start only at the end; it updates on scroll and on viewport resize (2400 -> 700).
• Selected tab is fully in view on load and after ArrowRight/Home/End on both viewports; reduced motion ends at the same positions.
• Accessible name is the full label (name comes from the DOM text, not the CSS-truncated render); the title is identical, so no double announcement.
• Focus ring on the selected tab is not clipped at the end side (the strip already clipped on y before this change).

Finding (minor, non-blocking): tabs.tsx:27-32 revealInline scrolls the tab flush to the strip edge, which now sits inside the 32px fade. After ArrowLeft the selected tab lands at the left edge with its first letters and ring edge faded (see shots/review-291/desk-left-nav.png, "Keyboard-safe..." with a dimmed K). Suggested fix: inset the reveal by the fade width (e.g. compare against viewport.left + inset / viewport.right - inset, with inset = 8 * spacing, only when that side overflows).

Note: no UI edits a tab label inline in this build (labels are Lexical node props); I could only rely on the existing document-tab-stability e2e (textContent mutation), which CI passes.

[MaggieAppleton]

Addressed review: revealInline now insets by the fade width (8 x spacing) via a pure revealDelta helper with unit tests; tabs wider than the clear area stay start-aligned to avoid flip-flopping.