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:
@@ -89,7 +89,9 @@ const Header = forwardRef<
|
||||
// slim and/or no filter sidebar is present — no hard-coded offset.
|
||||
<div
|
||||
ref={ref}
|
||||
className="pointer-events-none absolute top-3 left-3 right-[10%] z-chrome flex flex-wrap items-center gap-x-3 gap-y-2"
|
||||
// left-4 / right = 1rem + the scrollbar gutter: the header spans exactly the card grid's width
|
||||
// (left card's left edge to right card's right edge), matching the toolbar band below it.
|
||||
className="pointer-events-none absolute top-3 left-4 right-[calc(1rem+var(--sbw))] z-chrome flex flex-wrap items-center gap-x-3 gap-y-2"
|
||||
>
|
||||
{search}
|
||||
{/* Library scope (movie/show/both) sits right of the search box on Plex — relocated here from
|
||||
|
||||
Reference in New Issue
Block a user