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

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

- [x] `yarn test src/components/MastheadRule.test.tsx` — added 2 tests
covering both branches (short ⇒ inline display, long ⇒ xs `display:none`
media query)
- [x] `yarn test` — all 513 tests pass
- [x] `yarn type-check` — clean
- [x] `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](https://claude.ai/code/session_017cw5Lc18tDxEEpXoKPXFcD)_

Co-authored-by: Claude <noreply@anthropic.com>

Author: MarkusNeusinger

app/src/components/MastheadRule.test.tsx

@@ -1,4 +1,8 @@
 import { describe, it, expect, vi, beforeEach } from 'vitest';
+import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import { render as rtlRender } from '@testing-library/react';
+import type { ReactElement } from 'react';
 import { render, screen, userEvent } from '../test-utils';
 
 const trackEvent = vi.fn();
@@ -17,6 +21,15 @@ vi.mock('../hooks', async () => {
 
 import { MastheadRule } from './MastheadRule';
 
+function renderAt(initialEntry: string, ui: ReactElement) {
+  const theme = createTheme();
+  return rtlRender(
+    <ThemeProvider theme={theme}>
+      <MemoryRouter initialEntries={[initialEntry]}>{ui}</MemoryRouter>
+    </ThemeProvider>
+  );
+}
+
 describe('MastheadRule', () => {
   beforeEach(() => {
     trackEvent.mockClear();
@@ -47,4 +60,32 @@ describe('MastheadRule', () => {
     await user.click(screen.getByText('v1.2.3'));
     expect(trackEvent).toHaveBeenCalledWith('nav_click', { source: 'masthead_release', target: 'v1.2.3' });
   });
+
+  it('keeps the `~/anyplot.ai` root marker visible on xs for short breadcrumbs', () => {
+    const { container } = renderAt('/palette', <MastheadRule />);
+    const rootMarker = container.querySelector<HTMLAnchorElement>('a[href="/"]');
+    expect(rootMarker).not.toBeNull();
+    const styles = collectStylesFor(rootMarker!);
+    // Unconditional `display:inline` — no xs hide rule.
+    expect(styles).toMatch(/display:\s*inline/);
+    expect(styles).not.toMatch(/display:\s*none/);
+  });
+
+  it('hides the `~/anyplot.ai` root marker on xs for long breadcrumbs', () => {
+    const { container } = renderAt('/scatter-basic-annotated/python/matplotlib', <MastheadRule />);
+    const rootMarker = container.querySelector<HTMLAnchorElement>('a[href="/"]');
+    expect(rootMarker).not.toBeNull();
+    const styles = collectStylesFor(rootMarker!);
+    // MUI compiles `{ xs: 'none', sm: 'inline' }` into a media-query block
+    // with display:none at the xs (min-width:0px) breakpoint.
+    expect(styles).toMatch(/@media\s*\(min-width:\s*0px\)[^}]*display:\s*none/);
+  });
 });
+
+function collectStylesFor(el: Element): string {
+  const classes = el.className.split(/\s+/).filter(Boolean);
+  return Array.from(document.querySelectorAll('style'))
+    .map((s) => s.textContent ?? '')
+    .filter((css) => classes.some((c) => css.includes('.' + c)))
+    .join('\n');
+}

app/src/components/MastheadRule.tsx

@@ -123,6 +123,19 @@ export function MastheadRule() {
   // Pick one random comment style per browser session (stable across client-side nav).
   const [randomIdx] = useState(() => Math.floor(Math.random() * COMMENT_POOL.length));
 
+  // Short single-segment breadcrumbs (e.g. `/palette`, `/about`, `/mcp`) leave
+  // plenty of room on xs — hiding `~/anyplot.ai` there strands the breadcrumb
+  // as a tiny label and makes the masthead look empty. Keep the root marker
+  // visible whenever the xs-effective breadcrumb is under 15 chars.
+  const xsBreadcrumbLength = isLanding
+    ? 0
+    : segments.reduce((sum, s) => {
+        const xsLabel = s.short && s.short !== s.label ? s.short : s.label;
+        return sum + xsLabel.length;
+      }, 0);
+  const keepRootMarkerOnXs = !isLanding && xsBreadcrumbLength < 15;
+  const rootMarkerDisplay = keepRootMarkerOnXs ? 'inline' : { xs: 'none', sm: 'inline' };
+
   // Determine whether the center comment shows, what it says, and in which syntax.
   // - Landing: random delim + brand claim
   // - Spec routes (/:specId[/:language[/:library]]): random or language-matched delim,
@@ -182,12 +195,14 @@ export function MastheadRule() {
       }}>
         {/* Root marker — hidden on xs (where the NavBar logo `any.plot()` below
             already anchors the brand) so the breadcrumb has room for the
-            spec-id + lang + lib without truncating. */}
+            spec-id + lang + lib without truncating. Short single-segment
+            breadcrumbs override this and keep the marker on xs (see
+            keepRootMarkerOnXs above). */}
         <Box
           component={RouterLink}
           to="/"
           onClick={() => trackEvent('nav_click', { source: 'masthead_logo', target: '/' })}
-          sx={{ ...linkSx, display: { xs: 'none', sm: 'inline' } }}
+          sx={{ ...linkSx, display: rootMarkerDisplay }}
         >
           ~/anyplot.ai
         </Box>
@@ -238,9 +253,10 @@ export function MastheadRule() {
             );
             return (
               <Box key={`${seg.label}-${i}`} component="span">
-                {/* First separator hides on xs because the logo is hidden too;
+                {/* First separator follows the root marker's xs visibility —
+                    showing it without the marker would dangle a stray ` · `;
                     later separators always show. */}
-                <Box component="span" sx={i === 0 ? { display: { xs: 'none', sm: 'inline' } } : undefined}>
+                <Box component="span" sx={i === 0 ? { display: rootMarkerDisplay } : undefined}>
                   {' · '}
                 </Box>
                 {seg.to ? (