The rows now dissolve as they slide up under the sticky header (matching
the bottom fade), while the header stays crisp. A short gradient painted
by the header's ::after sits just below it and fades the rows — this
replaces the scroller's top mask-fade, which is off on these pages so it
can't touch the header. Barely visible at rest (it covers the first row's
top padding), clear once scrolling. Suite 15/15, tsc + knip clean.
The sticky <thead> jumped up ~8px and picked up the scroller's top fade
the moment you scrolled 1px — so it read as 'not fixed'. Two causes:
- the table sat under a pt-2 gap, so its natural position was 8px below
the sticky top:0 it snapped to. Drop the top padding (the fixed band's
controls row already gives the visual gap) → no shift.
- the page scroller's top edge fade turned on with the first scroll and
masked the header's top. Add a fadeTop flag (PageShell → PageScroller →
useScrollFade), off for the Channels + Audit pages whose scroll region
starts with a sticky header. Feed/channel keep the top fade (it fades
cards under the fixed toolbar, as intended).
Verified: header stays at a fixed offset with no fade change from scroll 0
through scrolled, on both the manager and the audit log. Suite 15/15.
Address manager UAT:
- The DataTable controls row (status chips + pager) now portals into the
fixed band via a new controlsInBand prop, so it stays put above the
sticky header instead of scrolling away — and the pager fills the empty
space next to the status chips, on one row.
- The tab bar is always fixed chrome now (not just on Subscriptions), so
it doesn't jump when switching tabs; on Subscriptions the stats/intro/
tags ride with it.
- Blocked channels moves off the bottom of the Subscriptions list into its
own 'Blocked' tab (with an empty state), alongside Subscriptions and
Discover.
Verified with a 90-channel test account: everything above the rows stays
fixed while the rows scroll under the sticky header. Suite 15/15, tsc +
knip clean.
Lift the whole subscribed-view header — tabs, sync stats + actions, the
intro, the tag chips and the sync-status chips — into the shell's fixed
band via PageToolbar. Combined with the sticky table header row, only the
channel rows scroll now; everything above them stays put.
The status chips move out of DataTable's controlsLeading into the fixed
chrome (they belong above the header, not in the scrolling controls row).
Note: the DataTable pager (rows-per-page / pagination) stays in the
scroller for now — it rarely shows on the manager (few channels = one
page). The discovery sub-view's chrome is still inline (separate
component, handled in the sweep). Suite 15/15, tsc + knip clean.
Make the DataTable's <thead> sticky so the column headers stay put at the
top of the page scroller while the rows scroll under them — the core of
'the table header should be fixed, only the rows scroll'. Benefits every
DataTable page (Channels manager, discovery, Audit log).
Each header cell gets bg-bg so rows don't show through; the header's
bottom border rides an inset box-shadow because a sticky <tr>'s own
border can scroll away with the collapsed table box. Verified on the
Audit log: 500 rows scroll under a header stuck at the scroller top; the
scroller's top fade is unobtrusive behind the solid header. Suite 15/15.
Two UAT nits on the channel page:
- the chip-row-to-cards gap was ~36px (toolbar pb-3 + wrapper pb-2 + grid
pt-3 stacking); drop the wrapper/grid pads so the toolbar's own pb-3 is
the only gap (~15px).
- restore the page scroller's TOP edge fade. It was dropped when the chrome
was a sticky sub-header (the fade bit into it); now the chrome is a fixed
band ABOVE the scroller, so the top fade correctly hints at cards
scrolling up under the toolbar. Reverts the useScrollFade edges option.
Suite 15/15, tsc + knip clean.
Reworks the channel detail per UAT: instead of the banner scrolling away
and a sticky sub-header (which felt odd to scroll and needed an opaque bar
that clashed with the design even at rest), the ENTIRE chrome — banner,
identity, tabs, toolbar — is fixed and only the video grid scrolls.
Mechanism: ChannelPage wraps its whole chrome in <PageToolbar> so it
portals into the shell's fixed band (like the feed toolbar); the
channelScoped Feed portals its toolbar into a slot at the bottom of that
chrome. No sticky, no opaque bar — the chrome is transparent over the page
bg because nothing scrolls under it (the band sits above the scroller).
E2E updated: the channel chrome (title + toolbar) stays at a fixed
viewport position while the grid scrolls. Suite 15/15, tsc clean.
Generalise the fixed-chrome pattern to the channel detail page: the
banner + identity now scroll away, while the tab row and the channel
feed's toolbar stick to the top as a sticky sub-header — only the video
grid scrolls.
Mechanism: PageToolbarSlot (the toolbar portal target) is now an exported,
overridable context. ChannelPage provides its own sticky sub-header node
as the target, so the channelScoped Feed portals its toolbar up next to
the tabs instead of into the shell's top band. Feed always portals its
toolbar now (the slot decides where it lands).
Also: the page scroller now fades only its BOTTOM edge — the top is
bounded by the fixed/sticky chrome, so a top fade only bit into it.
E2E: adds a lock that the channel tabs/toolbar stay pinned while the
banner scrolls away; suite 15/15 on :5173, tsc + knip clean.
The shell owns the scroller, so it owns the scroll policy. PageScroller
now takes a scrollKey identifying the logical view and keeps a per-view
offset in a module-level map, recorded live on scroll:
- same key returning (feed -> channel -> Back, filters unchanged) restores
where you were (bug 1) -- the feed's scroller unmounts, but the saved
offset survives and is re-applied, retried over a few frames so the
virtualized list has time to reach its full height;
- a new key (feed filters changed) starts at the top of the fresh result
set (bug 3). q is normalised out of the feed key so typing doesn't reset.
Recording on scroll rather than at unmount matters: by cleanup time the
scroller's scrollTop is already zeroed, so a cleanup-read saved 0.
Also fixes a Maximum-update-depth loop this introduced: the combined
element/fade ref was an inline callback, so React re-attached it every
commit and re-ran useScrollFade's state setter. Bound it with useCallback.
Adds E2E locks for bugs 1, 3 and 4 (restore on Back, reset on filter,
toolbar stays pinned). Full suite 14/14 green on :5173; tsc + knip clean.
The feed's show/content chips, source, count, sort and view switcher —
plus the active-filter chips — lived inside the scroller, so they
scrolled away with the cards; only the SearchBar strip stayed fixed.
Give PageShell a fixed toolbar band (filled by a module via the new
PageToolbar portal) above the scroller. On the feed page the toolbar +
chips portal into it and stay put — and removable — while cards scroll.
The channel-embedded Feed (channelScoped) keeps its inline toolbar,
which rides with the banner/tabs as before.
Verified both entry points at desktop + 1000px (toolbar wraps in-flow,
band grows, still pinned); E2E 11/11; tsc + knip clean.
The channel page rendered its own PageScroller as a separate App branch —
the source of the app's two <main>s. Make it a headerless/rail-less
PageShell config (its banner scrolls from the top) so there is exactly
ONE page scroller. Verified: single <main>, banner scrolls, in-page and
browser Back both return to the feed; E2E 11/11.
Collapse App's hand-assembled normal-page chrome (floating Header +
top-padded wrapper + PageScroller + banners) into a single PageShell
contract with declared fixed vs scrollable regions. No behaviour change;
the channel page still renders its own scroller (dissolved next).
Groundwork for the S4 fixed-chrome/scroll-ownership seam.
The E2E account is now admin (matching the real primary user), so the nav spec
also drives scheduler/config/users/audit — exercising the render ternary's admin
branches, which the upcoming PageShell refactor will restructure.
A `truncate` (nowrap) cell in the auto-layout DataTable sizes the whole table to
its widest row, so one long summary/change stretched the table past the card and
the row rules bled into the page. break-words keeps every row inside the card.
VideoCard/PlayerModal read openChannel from useNavigationActions (the memo'd
VideoCard subscribes to the STABLE actions context, so a page/channel change
no longer re-renders it); NavSidebar/Header read page/setPage; ChannelPage
reads closeChannel; NotificationsPanel reads setPage. App sheds the matching
props, and Feed/VirtualFeed no longer thread onOpenChannel at all.
Move page/channelView/ytSearch and the history/popstate/title effects out of the
App god component into a new NavigationProvider (split state/actions contexts so
the memo'd VideoCard doesn't re-render on a page/channel switch). App consumes it
via useNavigation/useNavigationActions but still passes the props down for now;
the consumer migration that removes the prop-drilling follows.
Every Settings change now persists on its own (debounced ~500ms so a slider drag
is one PUT), with a small transient indicator; the draft/dirty-save UI and the
navigation leave-guard are gone. Also unblocks the navigation extraction — there
is no longer a cross-page "unsaved settings" guard to thread through routing.
Locks the five flows the refactor must not break (feed, channel, player,
settings, nav) so later sprints can prove they changed nothing. Adds a thin
data-testid layer and a dedicated seeded non-demo account; the suite runs on
the baked :8080 stack (authoritative) or :5173. No product-behaviour change.
Five view modes behind a reusable ViewSwitcher (cards · cardsSmall · rows ·
rowsCompact · tiles), and a subdued edge-fade on the page scroller and every
capped list. UAT-accepted; not shipped to prod (user's call — the Platform
refactor is next). Version bump + releaseNotes deferred to ship time.
Same regression the S3 edge-fade caused for the Plex player, and the one my
"swept the class" pass missed: PlayerModal is `fixed inset-0 z-50` but rendered
inside the page scroller, so once that scroller got the mask it became a
stacking context and scoped the modal's z-50 inside it — the nav rail (z-40) and
header (z-30) painted over the player, and the fade dimmed its top edge (worst
at browser zoom, where the centered card is smaller against the rail/panel).
Portaled to <body>, where every other full-screen overlay already lives.
Verified: modal is body-parented, full-viewport, and hit-tests on top at the
nav / filter / header / corner points with the main mask active.
The player is `fixed left-0 top-0 z-50` but rendered from inside the page
scroller, so it only ever covered the viewport because that scroller happened
not to be a stacking context. Giving it the edge-fade made it one, and the mask
scoped the player's z-50 inside it: the rail, the side panel and the header
painted straight over the player, and its edges faded. Measured both ways, then
fixed where every other full-screen overlay here already sits — <body>.
Same for the Suspense fallback that stands in while the player chunk loads, and
for the floating draft save bar on the Configuration page. Swept the rest: every
other `fixed` element is either App-level or already portaled.
The sweep's own three (the thread, the Plex collections filter, the tag manager)
plus the seven the spec missed — the playlist picker, the row tag menu, the Plex
playlist/collection dialogs, the player's track menu, the video description and
the table's multi-select filter. Same idiom throughout: a height-capped list that
silently clipped its content now says so, and hides its scrollbar like the rail
and the panels already do.
The table's option list is its own module-level component because it owns a hook:
FilterPopover is redeclared per DataTable render, so React remounts it.
The subdued edge-fade the rail and side panels use now hints at more content on
the page scroller too, which the feed, the channel page and Plex all scroll
inside. Both <main>s move into one PageScroller so the invariants they share —
the load-bearing scrollbar gutter, and the bar staying visible because hiding it
would zero that gutter — are stated once.
Two fixes the hook needed first: it set fresh state on every scroll event, which
above a page tree would re-render it per frame; and it watched a single child
captured at mount, so a lazy page swapping out its Suspense fallback left the
observer on a detached node and the fade frozen at its pre-load value (measured
on the Plex page: no bottom fade over a 3119px list).
My last commit made ROW_COL the literal source of the widths — and froze
them, because inline pixels can't follow the root font that Settings'
text slider drives (0.9-1.3). Measured at 130%: the channel box stuck at
128px while its text wanted 152 and the meta cell, being a rem grid, grew
to 156 — one row in two unit systems.
The classes come back and ROW_COL documents them, saying plainly that the
two are matched by hand and why they have to be. Chasing a comment's
literal truth cost a property I'd already verified.
The comment claimed the boxes were generated from ROW_COL. They weren't —
still w-32/w-16/w-48 by hand — so a comment promised a link that didn't
exist, which is worse than not claiming it. The boxes take the numbers
directly now (inline, since Tailwind can't read a runtime value), and the
thresholds add up in plain arithmetic rather than an IIFE whose result
depended on key order.
They were two hand-written sets of numbers describing the same boxes —
change a w-32 and the thresholds are silently wrong, the symptom being a
column appearing just before it fits. Now computed from one table (which
reproduces the old values exactly).
Width also stops reaching the four views that ignore it: it changes every
frame of a resize, so passing it everywhere pushed all of them through
VideoCard's memo for nothing.
The viewport was the wrong signal: the nav rail and filter panel move the
row's width by ~430px between them, so at a 1280 window with both pinned
every column still qualified while the row had 762px for 766px of them —
the title squeezed back to nothing, the exact bug the breakpoints were
meant to fix. My own comment predicted it and I didn't follow it through.
VirtualFeed already measures the container for colCount, so it now passes
the item's real width down. Measured in the failing config: title -4 ->
359 with the date column standing down.
It sat above the one-line row's early return but only textBlock consumes
it, so every compact row allocated it and threw it away — the same shape
I'd already fixed for textBlock and meta, crept back. Also merges a
rationale comment I'd written twice.
The xl breakpoint was a fact about the FEED's toolbar, hard-coded into
the switcher that E4's managers are meant to reuse — their rows are far
emptier and would have hidden the label for no reason. It's a prop now,
defaulting to icon-only.
The two views spans collapse into one builder, which also fixes a
regression I'd just added: splitting them put the exact-count tooltip on
the number alone, so hovering the word gave nothing.
Three from UAT: the row's cap goes 1280 -> 1472 (+15%), since with the
rail and filters hidden there was a lot of page left over and the fixed
columns mean the extra width can only go to the title; the views column
drops the word and keeps it in the tooltip (a table doesn't repeat its
unit every line), taking that column 144 -> 64; and the view switcher
names the current mode where the toolbar has room, falling back to the
icon alone below xl. Title: 431 -> 511 at 1440, 706 at 1900.
Every column but the title is shrink-0, so once the fixed widths outgrow
the row the title gives all of it: measured clientWidth 0 on every row at
a 1000px window — a table of channel, duration, views and date with no
titles. Columns now drop from the right as space runs out, least
important first, in the order the user named: title, then channel, then
the rest. Measured at 1000px: title 0 -> 351.
I'd written this off as "E15's problem, bites below ~640px" — wrong by
600px, because I only ever measured at 1440.
I set the attribute unconditionally because the one-line row truncates
hard, and never looked at the other four views — where the name fits and
the tooltip just repeated what was already on screen. It now shares the
title's clamped check.
Dropping the sr-only twin last round swapped a double announcement for
none: a bare span's title isn't dependably surfaced, so a screen reader
got no hint a row was live, a stream, or saved. role="img" + aria-label
names each marker once and keeps the hover.
The saved pip borrowed the bookmark button's label, so it read "Saved —
click to remove" on a plain span: hover, be told to click, click, nothing.
It gets its own "Saved" string. The status markers drop their sr-only
twin too — with a title already carrying the meaning, a screen reader
that surfaces title text said it twice.
The cell was a flex row, so whatever sat left pushed the rest: a 36:36
and a 3:31:09 put the marker beside them at different x, and a live video
— which has no duration at all — pulled it left again. The column edges
lined up, which is all I had checked; the data inside them did not.
Each datum now has a fixed slot in a grid, the duration right-aligned as
a number should be. The chip becomes an icon, about a letter wide: it is
the least important thing in the row, and three states have to stay apart
by SHAPE — in the youtube scheme --accent is red, so a live dot and a
stream dot would be the same dot.
It looked <main> up when it bound, which the lazy pages won. On a first
visit to the channel page or Plex the chunk is still loading, so the
Suspense fallback is on screen, there is no <main> to find, and the effect
gave up — its dep never changes again, so the button stayed dead for that
whole visit and only worked once the chunk was cached.
It now reads the scroller off the scroll event instead, captured on the
document: scroll doesn't bubble but it does capture, so there is nothing
to look up and nothing to race. Also 50% bigger, as asked (44 -> 64).
Every width was measured in the English UI, but "101.7K megtekintés" is
139px against "101.7K views" at 79 — so a Hungarian user's view count
ellipsed itself in a column whose job is to show it. The channel column
gives back the room: its names truncate at any width we can afford (12
of 102 at 128 vs 5 at 160), and a clipped name still reads where a
clipped number does not.
The channel name also carries a tooltip now — it truncates hardest in
the fixed column and had no way to be read in full.
A 60-video sample topped out at 2:00:58, so the column was 8px short of
an 11-hour stream that is also saved — and the library holds one. That row
would wrap to two lines in the one layout that promises single ones.
The stacked layouts' textBlock now builds after the one-line row returns,
since only they use it.
Actions lead the row: the title is what you read, so that is the shortest
pointer trip to them. Every column after it is a fixed width, which is
what puts the same datum on the same vertical line in every row — a CSS
grid cannot do it, since VirtualFeed renders each row as its own subtree.
Widths come from measuring the real data, not from taste.
Metadata rises to the channel name's size, and the duration drops its
chip: over a thumbnail that background carries contrast against the
artwork, but in a text column it only made one data column look unlike
its neighbours.
Six buttons need 188px but the small card's text column bottoms out near
160 (its 180px column less padding), so the reset button — the only one
that is conditional, hence the only one anyone noticed — hung outside the
card by up to 15px. The buttons go tighter there (154px), and the row can
wrap as a backstop rather than clip. AddToPlaylist and DownloadButton now
take the button style as a prop so all six stay one size.
Tile actions also pin to the tile's bottom edge, so they land in the same
place whether the title above ran to one line or three.
Its column bottoms out at 180px, so its image is narrower than a row's
(measured 170px) while still carrying the 194px labelled pair — the same
overflow the row fix was for. The rule is the thumbnail's size class, not
the family: only the large card has room for labels.
The feed takes its column count from main's clientWidth and its
thumbnails are aspect-ratio boxes, so the two feed each other once the
content height sits within a scrollbar's width of the viewport: the bar
appears, 15px goes, thumbs shorten, the content fits, the bar leaves,
and round again — every frame. Measured: scrollbar width alternating
0/15 and clientWidth 987/972 on consecutive frames. Reserving the gutter
holds clientWidth constant and breaks it.
peter