Keep authored tabs on one line and fade the strip edges #291
- MA
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.
<details><summary>Original proposal and screenshots</summary>
## 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](https://claude.com/claude-code)



 </details>
- MA
**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.
- MA
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.
lavaman131referenced 75e363094390last month on GitHub
MaggieAppletonhead-ref-force-pushed 0e77d86a8a9flast month on GitHub
MaggieAppletonhead-ref-force-pushed 5c9508900e93last month on GitHub
MaggieAppletonhead-ref-force-pushed 9b80113ffcd1last month on GitHub
MaggieAppletonhead-ref-force-pushed f045696a30c2last month on GitHub
MaggieAppletonhead-ref-force-pushed 7537d34a6f74last month on GitHub
MaggieAppletonhead-ref-force-pushed 986588f89ad0last month on GitHub
MaggieAppletonhead-ref-force-pushed a5b5ff1733fdlast month on GitHub
MaggieAppletonmerged e3db818d0526last month on GitHub
MaggieAppletonhead-ref-deletedlast month on GitHub
MaggieAppletonreferenced this in Make tabs authorable in place and label empty table headers #382last month on GitHub