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:
2026-07-18 05:01:31 +02:00
parent ec807c8b31
commit 02bd0d433b
3 changed files with 7 additions and 16 deletions
+4 -11
View File
@@ -7,17 +7,10 @@ import { useEffect, useState, type CSSProperties } from "react";
// to attach to the scroller and the mask `style` to spread onto it. Uses a node-state callback
// ref (not useRef) so the effect (re)runs whenever the element attaches — e.g. a SidePanel that
// mounts collapsed and only renders its scroll body once expanded still wires up correctly.
// `edges` gates which ends fade. The page scroller passes `{ top: false }`: its top is delimited by
// the fixed/sticky module chrome (header, toolbar band, a sticky sub-header), so a top fade there
// would only bite into that chrome instead of hinting at more content.
export function useScrollFade(
fadePx = 20,
edges: { top?: boolean; bottom?: boolean } = {},
): {
export function useScrollFade(fadePx = 20): {
ref: (node: HTMLElement | null) => void;
style: CSSProperties;
} {
const { top: fadeTop = true, bottom: fadeBottom = true } = edges;
const [el, setEl] = useState<HTMLElement | null>(null);
const [fade, setFade] = useState({ up: false, down: false });
@@ -60,8 +53,8 @@ export function useScrollFade(
};
}, [el]);
const topPx = fadeTop && fade.up ? fadePx : 0;
const bottomPx = fadeBottom && fade.down ? fadePx : 0;
const mask = `linear-gradient(to bottom, transparent, #000 ${topPx}px, #000 calc(100% - ${bottomPx}px), transparent)`;
const mask = `linear-gradient(to bottom, transparent, #000 ${fade.up ? fadePx : 0}px, #000 calc(100% - ${
fade.down ? fadePx : 0
}px), transparent)`;
return { ref: setEl, style: { maskImage: mask, WebkitMaskImage: mask } };
}