/* ============================================================================= 98-shelf-sticky-header.css — v16.122 THE SHELF'S CATEGORY STRIP + STATUS ROW STAY PUT WHILE THE CARDS SCROLL. Owner spec: a user deep in a long list should be able to switch category, switch status, search or sort without scrolling back to the top. So only #cards-grid moves; #mylist-header (GAMES · ANIME · MUSIC · MOVIES · TV) and #mylist-toolbar (the status tabs + search + sort chips) pin under the island. --------------------------------------------------------------------------- THE ONE THING THAT MAKES THIS HARD `position: sticky` is SILENTLY KILLED by `contain: paint` on an ancestor — no error, no warning, the element just scrolls away. #mylist-view carries `contain: paint` as a scroll-perf hint, and #mylist-header carries it too, so both are released below. This is the same trap documented for the discovery hub in SETUP MEMORY; it is why the first attempt at a sticky shelf header would appear to do nothing at all. The identity `transform: translate3d(0,0,0)` on those elements is FINE and is left alone — a transform creates a containing block for `fixed`, but does not break `sticky`. --------------------------------------------------------------------------- THE TWO OFFSETS The rows pin one under the other, so the toolbar's `top` is the header's `top` plus the header's height. That height is measured live into `--shelfd-mylist-header-h` by js/98-shelf-sticky-header.js rather than hardcoded, because the header row is 52px on your own shelf and a different height on a viewed one (the edit controls are owner-only). `--shelfd-safe-top` is paired with `env(safe-area-inset-top)` via max(): env() resolves to 0 inside the Capacitor webview, so env() alone would pin the rows under the Dynamic Island instead of below it. ============================================================================= */ body.main-tab-mylist { --shelfd-mylist-sticky-top: max(var(--shelfd-safe-top, 0px), env(safe-area-inset-top, 0px)); } /* 1) Release only the containment that kills sticky. `contain: paint` is the specific offender — it clips, which makes the element the sticky container and the rows scroll away inside it. `layout` and `style` do neither, so the browser keeps those optimisations. MEASURED, counterbalanced, on an 87-card list: baseline `paint`, `none`, and `layout style` all scroll at a 2.8ms median / 5.6ms p95 with zero frames over the 8.3ms 120Hz budget. An earlier reading that showed a regression was warm-up from freshly appending 87 cards, not containment. */ body.main-tab-mylist #mylist-view, body.main-tab-mylist #mylist-header { contain: layout style !important; } /* The pin sentinel (js/98). 1px, above the header, watched by an IntersectionObserver — it must occupy real space to be observable, so it is sized rather than hidden, and pulled back out of the layout with a margin. */ .shelfd-mylist-header-sentinel { height: 1px; margin-bottom: -1px; pointer-events: none; } /* ----------------------------------------------------------------------------- SPECIFICITY NOTE — why these selectors carry a :not() that excludes nothing. 35-shelf-banner.css already declares body.main-tab-mylist:not(.viewing-other-user) #mylist-view #mylist-header.mylist-section-card { position: relative !important } at (2,3,0). A plain `body.main-tab-mylist #mylist-view #mylist-header` is (2,1,0) and loses the tie no matter how many !importants it carries — the rows simply kept scrolling away with no error to explain it. `:not(.shelfd-no-sticky-header)` brings this to (2,3,0), and this file loads after 35, so the later rule wins. It is also a real escape hatch: put that class on and the shelf header goes back to scrolling, which is a cheaper way to rule the sticky header in or out of a bug report than editing CSS. -------------------------------------------------------------------------- */ /* 2) The category strip pins first. */ body.main-tab-mylist:not(.shelfd-no-sticky-header) #mylist-view #mylist-header.mylist-section-card { position: sticky !important; /* !important because 35-shelf-banner.css sets `top: 9px !important` on this same element — an offset for the non-sticky layout that would otherwise pin the strip 9px down and, worse, apply the SAME 9px to the toolbar so the two rows stacked on top of each other. */ top: var(--shelfd-mylist-sticky-top, 0px) !important; z-index: 40; } /* 3) The status row pins directly beneath it. */ body.main-tab-mylist:not(.shelfd-no-sticky-header) #mylist-view #mylist-toolbar.toolbar { position: sticky !important; top: calc(var(--shelfd-mylist-sticky-top, 0px) + var(--shelfd-mylist-header-h, 52px)) !important; z-index: 39; /* the toolbar's own box is only as tall as the pills; this pads the strip so a card edge never shows in the gap between the two pinned rows */ padding-bottom: calc(8 * var(--shelfd-px, 1px)); } /* ----------------------------------------------------------------------------- v16.131 — THE PINNED CHROME: full-bleed fill + a full-bleed divider per row. Only once `body.shelfd-mylist-header-pinned` is set. Unpinned, both rows are transparent and sit in the page exactly as they always did — that class is what stopped a black band appearing above the page before any scrolling. WHY ::after AND NOT A BACKGROUND ON THE ROW Two problems the row's own `background` cannot solve: 1. `.container` insets these rows 9px from each screen edge, so a background on the row leaves the cards visible sliding through the gutters. 2. A divider drawn as a border sits inside that same inset, so it stops 9px short of both edges — and the spec is edge to edge. A 100vw `::after`, pinned behind the row's own content, solves both: it spans the full viewport, and the LAST 0.9px of it is the divider, painted with a hard-stop gradient rather than a border so the line is part of the same full-bleed box. The row keeps no background of its own, or it would cover the line everywhere except the gutters. ::after, not ::before: `#mylist-toolbar::before` is already the page's existing divider (13-e2ee-activity-post.css, every declaration !important) and taking it over is what made the dividers vanish in the first place. -------------------------------------------------------------------------- */ body.shelfd-mylist-header-pinned.main-tab-mylist:not(.viewing-other-user) #mylist-view #mylist-header.mylist-section-card::after, body.shelfd-mylist-header-pinned.main-tab-mylist #mylist-view #mylist-toolbar.toolbar::after { content: '' !important; display: block !important; position: absolute !important; top: 0 !important; bottom: 0 !important; left: 50% !important; width: 100vw !important; margin-left: -50vw !important; z-index: -1 !important; pointer-events: none !important; /* fill, then a 0.9px divider hard-stopped at the bottom edge */ background: linear-gradient( to bottom, #0E0E0E calc(100% - 0.9px), rgba(196, 181, 253, 0.18) calc(100% - 0.9px) ) !important; } /* The existing divider above the toolbar (top: -10px) lands INSIDE the pinned header, which sits a layer above it — so once pinned it is covered and the header's own bottom line above takes over. Hidden rather than left to fight. */ body.shelfd-mylist-header-pinned.main-tab-mylist #mylist-view #mylist-toolbar.toolbar::before { opacity: 0 !important; } /* 5) The island strip above the pinned header. Without this the cards show in the safe-area band as they scroll past. `body::after` because body has no transform or containment, so `fixed` locks to the real viewport — and because `body::before` is globally disabled in file 17. */ body.shelfd-mylist-header-pinned.main-tab-mylist::after { content: ''; display: block; position: fixed; top: 0; left: 0; right: 0; height: max(var(--shelfd-safe-top, 0px), env(safe-area-inset-top, 0px)); background: #0E0E0E; z-index: 50; pointer-events: none; } body.light-mode.shelfd-mylist-header-pinned.main-tab-mylist::after { background: #ffffff !important; } body.light-mode.shelfd-mylist-header-pinned.main-tab-mylist:not(.viewing-other-user) #mylist-view #mylist-header.mylist-section-card::after, body.light-mode.shelfd-mylist-header-pinned.main-tab-mylist #mylist-view #mylist-toolbar.toolbar::after { background: linear-gradient( to bottom, #ffffff calc(100% - 0.9px), rgba(20, 18, 28, 0.14) calc(100% - 0.9px) ) !important; }