githubnext/chopinPublic

Let's compose rich plans together

Keep authored tabs on one line and fade the strip edges #291

MergedMaggieAppletonmerged 3 commits intomainfromrefs/pull/291/head
  1. 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): ![before 1440](https://github.com/user-attachments/assets/bd08e3eb-d995-4a8f-be56-51cc21daa26b)

    After 1440: ![after 1440](https://github.com/user-attachments/assets/e57da7c4-1c8f-4dc4-a4a7-0db3b0f3b362)

    Before 390: ![before 390](https://github.com/user-attachments/assets/4262617e-d9c2-4883-80a2-c4ba3f29e653)

    After 390: ![after 390](https://github.com/user-attachments/assets/04c1dcaa-b3b3-4b7c-8396-bf3ba9b0e377)

    ## 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)

    ![before 1440](https://github.com/user-attachments/assets/bd08e3eb-d995-4a8f-be56-51cc21daa26b)

    ![after 1440](https://github.com/user-attachments/assets/e57da7c4-1c8f-4dc4-a4a7-0db3b0f3b362)

    ![before 390](https://github.com/user-attachments/assets/4262617e-d9c2-4883-80a2-c4ba3f29e653)

    ![after 390](https://github.com/user-attachments/assets/04c1dcaa-b3b3-4b7c-8396-bf3ba9b0e377) </details>

  2. MA
    Author

    **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.

  3. MA
    Author

    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.

  4. lavaman131referenced 75e363094390last month on GitHub

  5. MaggieAppletonhead-ref-force-pushed 0e77d86a8a9flast month on GitHub

  6. MaggieAppletonhead-ref-force-pushed 5c9508900e93last month on GitHub

  7. MaggieAppletonhead-ref-force-pushed 9b80113ffcd1last month on GitHub

  8. MaggieAppletonhead-ref-force-pushed f045696a30c2last month on GitHub

  9. MaggieAppletonhead-ref-force-pushed 7537d34a6f74last month on GitHub

  10. MaggieAppletonhead-ref-force-pushed 986588f89ad0last month on GitHub

  11. MaggieAppletonhead-ref-force-pushed a5b5ff1733fdlast month on GitHub

  12. MaggieAppletonmerged e3db818d0526last month on GitHub

  13. MaggieAppletonclosedlast month on GitHub

  14. MaggieAppletonhead-ref-deletedlast month on GitHub

  15. MaggieAppletonreferenced this in Make tabs authorable in place and label empty table headers #382last month on GitHub