polish(channel): tighten toolbar-to-grid gap + restore top scroll fade
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.
This commit is contained in:
@@ -655,7 +655,7 @@ export default function Feed({
|
||||
);
|
||||
|
||||
return (
|
||||
<div className={channelScoped ? "px-4 sm:px-6 pb-4 pt-3" : "px-4 pb-4 pt-2"}>
|
||||
<div className={channelScoped ? "px-4 sm:px-6 pb-4" : "px-4 pb-4 pt-2"}>
|
||||
{/* The toolbar (+ active-filter chips) is FIXED chrome: it portals into a PageToolbarSlot so
|
||||
it stays put while the cards scroll (bug 4). On the feed page that slot is the shell's top
|
||||
band; on a channel page ChannelPage overrides the slot with its own sticky sub-header, so
|
||||
@@ -663,7 +663,7 @@ export default function Feed({
|
||||
baseline (channel-scoped, whole-catalog, show-all), so each would read as a "filter you
|
||||
applied" when it's just the page being itself. */}
|
||||
<PageToolbar>
|
||||
<div className={channelScoped ? "px-4 sm:px-6 pb-2" : "px-4 pt-4 pb-1"}>
|
||||
<div className={channelScoped ? "px-4 sm:px-6" : "px-4 pt-4 pb-1"}>
|
||||
{toolbar}
|
||||
{!channelScoped && (
|
||||
<ActiveFilterChips
|
||||
|
||||
@@ -67,9 +67,7 @@ export default function PageScroller({
|
||||
children: ReactNode;
|
||||
scrollKey?: string;
|
||||
}) {
|
||||
// Only the bottom edge fades: the top is bounded by the shell's fixed chrome (header / toolbar
|
||||
// band) or a module's sticky sub-header, so a top fade would just eat into that chrome.
|
||||
const fade = useScrollFade(20, { top: false });
|
||||
const fade = useScrollFade();
|
||||
const fadeRef = fade.ref;
|
||||
const elRef = useRef<HTMLElement | null>(null);
|
||||
// Stable identity: an inline ref callback changes every render, which makes React detach and
|
||||
|
||||
Reference in New Issue
Block a user