fix(ui): mobile breadcrumb truncation + initial FAB lift on deep links

## Breadcrumb (MastheadRule)

At 375px the masthead showed `~/anyplot.ai · bar-tornado-sensitivi…` —
ellipsis ate the language and library segments, i.e. exactly the parts the
user was currently looking at. Two reasons:

1. `gridTemplateColumns` switched to `1fr auto 1fr` at `sm`, but the center
   comment is `display: none` until `md`. The right `1fr` therefore claimed
   ~half the bar at sm just for the theme toggle, leaving the breadcrumb
   ~290px when it needed ~360px.
2. Language (`python`) + library (`plotnine`) were always rendered in full,
   competing with a long spec-id for the limited room.

Fix:

- Grid stays `1fr auto auto` until `md`, so xs+sm give the breadcrumb the
  full remaining width (toggle still hugs the right edge).
- Language and library carry a `short` label (`py` / `p9` via the existing
  `LANG_EXT` and `LIB_ABBREV` maps already used in compact catalog tiles).
  Rendered with the NavBar dual-span pattern: short on xs+sm, full on md+.
  `title=` carries the full name for hover/SR users.
- The `~/anyplot.ai` root marker (and its leading separator) is hidden on
  xs only. The NavBar logo `any.plot()` immediately below already anchors
  the brand; the masthead becomes a pure breadcrumb on mobile.

Result at 375px:
  before: `~/anyplot.ai · bar-tornado-sensitivi…`
  after:  `bar-tornado-sensitivity · py · p9`

## FAB lift (FeedbackWidget)

On a direct deep link to a spec page the FAB appeared elevated for ~hundreds
of ms before settling at the corner. The lift effect uses
`footer.getBoundingClientRect().top` to detect viewport overlap, and only
recomputes on `scroll` / `resize` — neither fires while React hydrates and
the spec data + images stream in. During that window the footer sits high in
the layout and the FAB lifts dramatically, then drops once content loads.

Watch the body with `ResizeObserver` (in addition to scroll/resize) and
re-run the same RAF-batched update — content growth now triggers a
recompute, so the FAB stays anchored at the corner during initial layout.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: MarkusNeusinger

app/src/components/FeedbackWidget.tsx

@@ -106,20 +106,28 @@ export function FeedbackWidget() {
       const r = footer.getBoundingClientRect();
       setLift(Math.max(0, window.innerHeight - r.top));
     };
-    const onScroll = () => {
+    const schedule = () => {
       if (rafId) return;
       rafId = window.requestAnimationFrame(() => {
         rafId = 0;
         update();
       });
     };
     update();
-    window.addEventListener('scroll', onScroll, { passive: true });
-    window.addEventListener('resize', onScroll);
+    window.addEventListener('scroll', schedule, { passive: true });
+    window.addEventListener('resize', schedule);
+    // On a direct deep link to a spec page the page is initially short — data
+    // and images stream in over the next ~hundred ms — so on first paint the
+    // footer sits high in the layout and the FAB lifts dramatically before
+    // settling. Watch the body for size changes so the FAB drops back to the
+    // corner once content stabilises.
+    const ro = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(schedule) : null;
+    ro?.observe(document.body);
     return () => {
       if (rafId) cancelAnimationFrame(rafId);
-      window.removeEventListener('scroll', onScroll);
-      window.removeEventListener('resize', onScroll);
+      window.removeEventListener('scroll', schedule);
+      window.removeEventListener('resize', schedule);
+      ro?.disconnect();
     };
   }, []);
   // Default FAB center on xs is 32px from viewport bottom (bottom 12 + half of

app/src/components/MastheadRule.tsx

@@ -5,6 +5,7 @@ import { typography, colors } from '../theme';
 import { ThemeToggle } from './ThemeToggle';
 import { useTheme, useLatestRelease, useAnalytics } from '../hooks';
 import { RESERVED_TOP_LEVEL } from '../utils/paths';
+import { LIB_ABBREV, LANG_EXT } from '../constants';
 
 // Symmetric block-comment delimiters used when no language context is in the URL.
 // One is picked on mount so each page load reveals a different classic.
@@ -51,6 +52,10 @@ const staticSx = {
 interface Segment {
   label: string;
   to?: string;
+  // Shorthand label used on xs viewports — the masthead would otherwise
+  // truncate the spec-id and cut off language/library entirely (the parts the
+  // user is actively looking at). Falls back to `label` when absent.
+  short?: string;
 }
 
 /**
@@ -83,10 +88,10 @@ function pathSegments(pathname: string): Segment[] {
   }
   if (language) {
     if (library) {
-      segs.push({ label: language, to: `/${specId}/${language}` });
-      segs.push({ label: library });
+      segs.push({ label: language, to: `/${specId}/${language}`, short: LANG_EXT[language] });
+      segs.push({ label: library, short: LIB_ABBREV[library] });
     } else {
-      segs.push({ label: language });
+      segs.push({ label: language, short: LANG_EXT[language] });
     }
   }
   return segs;
@@ -143,9 +148,12 @@ export function MastheadRule() {
   return (
     <Box sx={{
       display: 'grid',
-      // xs: left takes all remaining room, toggle hugs the right edge.
-      // sm+: center slot appears (auto), sides are balanced 1fr auto 1fr.
-      gridTemplateColumns: { xs: '1fr auto auto', sm: '1fr auto 1fr' },
+      // xs+sm: left takes all remaining room, toggle hugs the right edge —
+      // the center comment is hidden until md, so giving it its own balanced
+      // 1fr column at sm just wastes ~half the bar on whitespace and forces
+      // the breadcrumb to truncate. md+: center slot appears, sides are
+      // balanced 1fr auto 1fr.
+      gridTemplateColumns: { xs: '1fr auto auto', md: '1fr auto 1fr' },
       alignItems: 'center',
       columnGap: { xs: 1, sm: 2 },
       py: 1.25,
@@ -162,19 +170,23 @@ export function MastheadRule() {
         overflow: 'hidden',
         textOverflow: 'ellipsis',
       }}>
-        {/* Always-visible root marker */}
+        {/* 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. */}
         <Box
           component={RouterLink}
           to="/"
           onClick={() => trackEvent('nav_click', { source: 'masthead_logo', target: '/' })}
-          sx={linkSx}
+          sx={{ ...linkSx, display: { xs: 'none', sm: 'inline' } }}
         >
           ~/anyplot.ai
         </Box>
 
         {isLanding ? (
           <>
-            {' · '}
+            <Box component="span" sx={{ display: { xs: 'none', sm: 'inline' } }}>
+              {' · '}
+            </Box>
             <Box
               component="a"
               href={`${REPO_URL}/tree/main`}
@@ -198,25 +210,46 @@ export function MastheadRule() {
             </Box>
           </>
         ) : (
-          segments.map((seg, i) => (
-            <Box key={`${seg.label}-${i}`} component="span">
-              {' · '}
-              {seg.to ? (
-                <Box
-                  component={RouterLink}
-                  to={seg.to}
-                  onClick={() => trackEvent('nav_click', { source: 'breadcrumb', target: seg.to })}
-                  sx={linkSx}
-                >
-                  {seg.label}
+          segments.map((seg, i) => {
+            const hasShort = seg.short && seg.short !== seg.label;
+            const labelEl = hasShort ? (
+              <>
+                {/* xs+sm show the shorthand (`py`, `p9`); md+ has room for the
+                    full name. Matches NavBar's md-breakpoint convention. */}
+                <Box component="span" sx={{ display: { xs: 'inline', md: 'none' } }} title={seg.label}>
+                  {seg.short}
                 </Box>
-              ) : (
-                <Box component="span" sx={{ ...staticSx, color: 'var(--ink-soft)' }}>
+                <Box component="span" sx={{ display: { xs: 'none', md: 'inline' } }}>
                   {seg.label}
                 </Box>
-              )}
-            </Box>
-          ))
+              </>
+            ) : (
+              seg.label
+            );
+            return (
+              <Box key={`${seg.label}-${i}`} component="span">
+                {/* First separator hides on xs because the logo is hidden too;
+                    later separators always show. */}
+                <Box component="span" sx={i === 0 ? { display: { xs: 'none', sm: 'inline' } } : undefined}>
+                  {' · '}
+                </Box>
+                {seg.to ? (
+                  <Box
+                    component={RouterLink}
+                    to={seg.to}
+                    onClick={() => trackEvent('nav_click', { source: 'breadcrumb', target: seg.to })}
+                    sx={linkSx}
+                  >
+                    {labelEl}
+                  </Box>
+                ) : (
+                  <Box component="span" sx={{ ...staticSx, color: 'var(--ink-soft)' }}>
+                    {labelEl}
+                  </Box>
+                )}
+              </Box>
+            );
+          })
         )}
       </Box>