feat(toolbar): fixed-width ItemCount pill, lead the toolbar with it, align chrome to the cards
- New ItemCount: a generic, FIXED-WIDTH count pill (glass, non-interactive) — "192,050 items" (neutral noun, dynamic plural), min-w-[9rem] so a changing number never shifts the controls beside it; a million or more collapses to "1M+" with the exact figure in the title tooltip. - Feed toolbar: ItemCount is the fixed leading element now; dropped the mx-1 separators so every gap is a uniform 1.5 (Content-types↔Source used to be wider than Watch-state↔Content-types). - Chrome-to-card alignment (app-wide, via the shared Header + PageShell): the floating header and the toolbar band now span exactly the card grid's width — left-4, and a right edge of 1rem + the scrollbar gutter (measured once into --sbw), so the fixed chrome lines up with the scrolled cards instead of running ~15px past them. Wraps cleanly to multiple rows on mobile. Renames the count testid feed-result-count → item-count (E2Es updated).
This commit is contained in:
@@ -136,6 +136,19 @@ export default function App() {
|
||||
if (meQuery.data && getActiveAccount() == null) setActiveAccount(meQuery.data.id);
|
||||
}, [meQuery.data?.id]);
|
||||
|
||||
// Measure the scrollbar's gutter width once and publish it as --sbw, so the floating header and the
|
||||
// toolbar band can pad their right edge to line up with the scrolled cards (the app scroller reserves
|
||||
// that gutter via scrollbar-gutter: stable). It's a device constant, so a one-shot mount measure is enough.
|
||||
useEffect(() => {
|
||||
const probe = document.createElement("div");
|
||||
probe.style.cssText =
|
||||
"position:absolute;top:-9999px;width:100px;height:100px;overflow:scroll;scrollbar-gutter:stable";
|
||||
document.body.appendChild(probe);
|
||||
const w = probe.offsetWidth - probe.clientWidth;
|
||||
document.body.removeChild(probe);
|
||||
document.documentElement.style.setProperty("--sbw", `${w}px`);
|
||||
}, []);
|
||||
|
||||
// Once signed in, drop any leftover ONE-TIME query params from the pre-login flow (?access, ?verify,
|
||||
// ?reset) — but NOT the nav/filter params, which the logged-in app now reads from and keeps in the
|
||||
// URL. Gated on auth so the logged-out Welcome page still reads its params first.
|
||||
|
||||
Reference in New Issue
Block a user