fix(ui): mobile breadcrumb truncation + initial FAB lift#7283
Merged
Conversation
## 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>
The center `""" specId.library """` echo at md+ steals ~340px from the `auto` grid column, leaving the breadcrumb cramped enough that the full `~/anyplot.ai · specId · language · library` truncates with `…` even on a 1280px viewport. The echo is also redundant on impl pages — the breadcrumb already shows all three parts. Hide the center cell once the URL has all three segments (`/:specId/:language/:library`). Landing, spec hub, and language hub keep their center comment. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Contributor
There was a problem hiding this comment.
Pull request overview
Fixes three small mobile/desktop UI bugs: the masthead breadcrumb truncating on small viewports, the center comment causing overflow on impl pages at md+, and the feedback FAB lifting prematurely on deep-link hydration.
Changes:
MastheadRule.tsx: hide root marker on xs, abbreviate language/library segments via existingLANG_EXT/LIB_ABBREVmaps, shift center slot fromsmtomd, and hide the center echo when on an impl route.FeedbackWidget.tsx: renameonScrolltoscheduleand add aResizeObserverondocument.bodyso the lift recomputes as content streams in.
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 | Adds short labels and responsive visibility rules for breadcrumb segments; hides redundant center echo on impl pages. |
| app/src/components/FeedbackWidget.tsx | Adds ResizeObserver-driven recompute of FAB lift to avoid initial jump on deep links. |
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
After hiding the center comment on impl pages the breadcrumb still truncated between ~900–1100px viewports: the md grid stayed `1fr auto 1fr`, so the right column claimed ~half the bar (~360px at 920px) just to hold the theme toggle. Switching to abbreviated `python` / `plotnine` made the content wider than the cramped breadcrumb column. Conditionally pick the md grid: - center visible (landing / spec hub / lang hub): `1fr auto 1fr` — keeps the comment visually centred. - center hidden (impl pages): `1fr auto auto` — breadcrumb claims the whole row width minus the toggle button. At 920px the breadcrumb container now measures ~670px (was ~370px) and `~/anyplot.ai · <spec-id> · python · plotnine` fits without `…`. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
MarkusNeusinger
added a commit
that referenced
this pull request
May 18, 2026
Version bump for the v2.4.0 release. Release notes will be attached to the tag once this lands. ## Highlights since v2.3.0 - **R / ggplot2 added as the 10th library** + multi-language pipeline (#6944, #6961, #7052). 30 ggplot2 implementations landed across foundational plot types. - **In-app feedback widget** (#7143). - **Stats page** with Plausible visitors chart + daily-impl timeline (#6608). - **Language across the site**: `/plots?lang=` filtering, cross-language carousel, language in URLs and titles (#7141, #7142, #7144). - **UI polish**: pseudo-function styling for 404 / footer / empty state / library card (#6436); mobile fixes for `/stats`, `/mcp`, breadcrumb + FAB (#6902, #7283). - **Pipeline**: review-retry listener + stuck-jobs watchdog (#6084); daily-regen 2h → hourly (#6943). - **Dependencies**: mypy 1.20→2.1, urllib3 2.6→2.7, authlib bump, react/mui/python-minor groups. - ~1200 implementation regenerations across all 10 libraries. No SemVer-breaking changes. **Full Changelog:** v2.3.0...main 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Three small, related UI bugs the user hit on a single mobile session:
~/anyplot.ai · bar-tornado-sensitivi…, eating the very segments the user was currently looking at.~/anyplot.ai · bar-tornado-sensitivity · pyt…because the center""" specId.library """echo claimed ~340px from the grid.Changes
MastheadRule.tsx1fr auto autountilmd. The center comment slot isdisplay: noneuntilmdanyway, so giving it its own1frcolumn at sm just wasted ~half the bar on whitespace.shortlabel (py/p9via the existingLANG_EXTandLIB_ABBREVmaps 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.~/anyplot.airoot marker (and its leading separator) is hidden on xs only. The NavBar logoany.plot()immediately below already anchors the brand.""" 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.tsxThe lift effect used
footer.getBoundingClientRect().topto detect overlap and only recomputed onscroll/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 aResizeObserverondocument.bodythat re-runs the same RAF-batched update on layout changes.Results
~/anyplot.ai · bar-tornado-sensitivi…bar-tornado-sensitivity · py · p9~/anyplot.ai · bar-tornado-sensitivi…~/anyplot.ai · bar-tornado-sensitivity · py · p9~/anyplot.ai · bar-tornado-sensitivity · pyt…~/anyplot.ai · bar-tornado-sensitivity · python · plotnine(center hidden)<!-- specId -->still shown)main · v2.3.0/ sm+:~/anyplot.ai · main · v2.3.0Verified
tsc --noEmitgreentransform: nonewhen footer is below fold;translateY(-54px)when footer enters viewport (test scrolling to bottom at 375×812)Test plan
/<long-spec>/python/plotnineat iPhone width — breadcrumb shows full spec-id +py+p9, no ellipsis~/anyplot.aireappears, still abbreviated/<spec>at desktop — center echo<!-- spec -->still visiblemain · v2.x.xwithout the leading separator/<spec>/python/<lib>on mobile — FAB stays in the corner from the first paint (no jumpy elevation)🤖 Generated with Claude Code