fix(masthead): keep ~/anyplot.ai visible on xs for short breadcrumbs

[MarkusNeusinger]

Summary

Reported on /palette: the page looks empty up top because on mobile the masthead bar drops the ~/anyplot.ai root marker and leaves a single tiny "palette" label hanging in an otherwise empty row.

The xs-hide behavior exists so long breadcrumbs like scatter-basic-annotated · python · matplotlib don't truncate — but it's overkill for reserved single-segment pages (/palette, /about, /mcp, /stats, …).

Change

Compute the xs-effective length of the breadcrumb (using the short-form labels for lang/lib segments where applicable). When that total is under 15 chars and we're not on the landing page, keep the ~/anyplot.ai marker and its leading · separator visible on xs. Long breadcrumbs keep the existing compact behavior.

Threshold per user request: shorter than 15 chars ⇒ keep the prefix.

Examples

Route	xs label length	xs behavior
/palette	7	~/anyplot.ai · palette
/about	5	~/anyplot.ai · about
/mcp	3	~/anyplot.ai · mcp
/scatter-basic	13	~/anyplot.ai · scatter-basic
/scatter-basic-annotated	23	scatter-basic-annotated (compact, unchanged)
/scatter-basic/python/matplotlib	13+2+10 = 25 (with shorts)	compact, unchanged

Test plan

• yarn test src/components/MastheadRule.test.tsx — added 2 tests covering both branches (short ⇒ inline display, long ⇒ xs display:none media query)
• yarn test — all 513 tests pass
• yarn type-check — clean
• yarn lint — clean (2 pre-existing warnings, unrelated)
• Visual check on mobile viewport at /palette after deploy

https://claude.ai/code/session_01H3pPMxN66vWWiD1cYS1bcz

---

Generated by Claude Code

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.

📢 Thoughts on this report? Let us know!

[Copilot]

Pull request overview

Fixes a mobile masthead issue where short single-segment routes like /palette would hide the ~/anyplot.ai root marker on xs viewports, leaving a nearly-empty bar. The fix computes the xs-effective breadcrumb length and keeps the root marker (and its trailing separator) visible when the total is under 15 characters.

Changes:

• Added xsBreadcrumbLength / keepRootMarkerOnXs / rootMarkerDisplay computation in MastheadRule and applied to both root marker and first separator.
• Updated inline comments to reflect new behavior.
• Added two tests (short-breadcrumb keeps inline display, long-breadcrumb hides at xs) using a local renderAt helper and style-tag inspection.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
app/src/components/MastheadRule.tsx	Compute xs label length, conditionally keep root marker + first separator on xs
app/src/components/MastheadRule.test.tsx	Add tests for both branches via Emotion style inspection