fix(ui): mobile breadcrumb truncation + initial FAB lift (#7283)

MarkusNeusinger · claude · web-flow · commit 60e1a10bba8f · 2026-05-18T22:48:40.000+02:00
## Summary Three small, related UI bugs the user hit on a single mobile session: 1. **Mobile breadcrumb truncated the lang/lib segments** — at 375px the masthead showed `~/anyplot.ai · bar-tornado-sensitivi…`, eating the very segments the user was currently looking at. 2. **Md+ overflow even with full breadcrumb** — at 1280px on impl pages the breadcrumb still truncated to `~/anyplot.ai · bar-tornado-sensitivity · pyt…` because the center `""" specId.library """` echo claimed ~340px from the grid. 3. **FAB started elevated on deep links** — opening a spec page directly made the quick-feedback FAB float ~hundreds of pixels above the corner for the first few hundred ms before settling. ## Changes ### `MastheadRule.tsx` - Grid stays `1fr auto auto` until `md`. The center comment slot is `display: none` until `md` anyway, so giving it its own `1fr` column at sm just wasted ~half the bar on whitespace. - Language and library segments carry a `short` label (`py` / `p9` via the existing `LANG_EXT` and `LIB_ABBREV` maps used elsewhere 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 and screen readers. - 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 center `""" specId.library """` echo is now hidden when the URL has all three segments (`/:specId/:language/:library`). The breadcrumb already shows all three parts; the echo is redundant *and* it was the load-bearing cause of the md overflow. Landing, spec hub, and language hub still show their center comment. ### `FeedbackWidget.tsx` The lift effect used `footer.getBoundingClientRect().top` to detect overlap and only recomputed on `scroll` / `resize`. Neither fires while React hydrates and the spec data + images stream in — so on deep links the footer briefly sat high in the layout and the FAB lifted dramatically before content arrived and pushed the footer below the fold. Add a `ResizeObserver` on `document.body` that re-runs the same RAF-batched update on layout changes. ## Results | Viewport | Route | Before | After | | --- | --- | --- | --- | | 375 (xs) | impl page | `~/anyplot.ai · bar-tornado-sensitivi…` | `bar-tornado-sensitivity · py · p9` | | 700 (sm) | impl page | `~/anyplot.ai · bar-tornado-sensitivi…` | `~/anyplot.ai · bar-tornado-sensitivity · py · p9` | | 1280 (md) | impl page | `~/anyplot.ai · bar-tornado-sensitivity · pyt…` | `~/anyplot.ai · bar-tornado-sensitivity · python · plotnine` (center hidden) | | 1280 (md) | spec hub | unchanged | unchanged (`` still shown) | | any | landing | unchanged (xs hides logo, see below) | xs: `main · v2.3.0` / sm+: `~/anyplot.ai · main · v2.3.0` | ## Verified - `tsc --noEmit` green - Playwright + computed-style probe at 375 / 700 / 1280 — no overflow on impl pages at any breakpoint - FAB at `transform: none` when footer is below fold; `translateY(-54px)` when footer enters viewport (test scrolling to bottom at 375×812) ## Test plan - [ ] Open `/<long-spec>/python/plotnine` at iPhone width — breadcrumb shows full spec-id + `py` + `p9`, no ellipsis - [ ] Same route at tablet (~700px) — `~/anyplot.ai` reappears, still abbreviated - [ ] Same route at desktop — full breadcrumb, no center echo - [ ] Spec hub `/<spec>` at desktop — center echo `` still visible - [ ] Landing on mobile — bar reads `main · v2.x.x` without the leading separator - [ ] Hard-refresh a deep link `/<spec>/python/<lib>` on mobile — FAB stays in the corner from the first paint (no jumpy elevation) 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
diff --git a/app/src/components/FeedbackWidget.tsx b/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
diff --git a/app/src/components/MastheadRule.tsx b/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;
@@ -126,7 +131,11 @@ export function MastheadRule() {
   const parts = location.pathname.split('/').filter(Boolean);
   const isReserved = parts.length > 0 && RESERVED_TOP_LEVEL.has(parts[0]);
   const isSpecRoute = parts.length > 0 && !isReserved;
-  const centerVisible = isLanding || isSpecRoute;
+  // On impl pages (/:specId/:language/:library) the breadcrumb already shows
+  // all three parts; the center `""" specId.library """` echo is redundant
+  // and steals room that pushes the breadcrumb into truncation. Hide it.
+  const isImplPage = isSpecRoute && parts.length >= 3;
+  const centerVisible = (isLanding || isSpecRoute) && !isImplPage;
 
   let centerContent = 'the open plot catalogue';
   let centerDelim: { open: string; close: string } = COMMENT_POOL[randomIdx];
@@ -143,9 +152,18 @@ 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+: when the center comment actually
+      // shows (landing / spec hub / lang hub), use balanced 1fr auto 1fr so
+      // the comment sits visually centred. On impl pages the comment is
+      // hidden — collapse the right column to `auto` so the breadcrumb can
+      // claim the full row width instead of half.
+      gridTemplateColumns: {
+        xs: '1fr auto auto',
+        md: centerVisible ? '1fr auto 1fr' : '1fr auto auto',
+      },
       alignItems: 'center',
       columnGap: { xs: 1, sm: 2 },
       py: 1.25,
@@ -162,19 +180,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 +220,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>
 
