fix(virtual): apply scrollMargin to remaining useVirtualizer call-sites (#766)

* refactor(virtual): extract scrollMargin measurement into a reusable hook

VirtualCardGrid carried its own useLayoutEffect + ResizeObserver block for
the scroll-margin computation introduced in #764. The same pattern is
needed on every other useVirtualizer site whose wrapper sits below other
content; pull it out as useVirtualizerScrollMargin so each call-site is a
single hook invocation instead of a 20-line duplicate.

No behavior change for VirtualCardGrid — same scroll element, same deps,
same observed nodes.

* fix(virtual): apply scrollMargin to the remaining useVirtualizer call-sites

#764 fixed the symptom for VirtualCardGrid (Albums / Artists grid via the
shared component, Composers grid, "More by …" rail, etc.) but four more
useVirtualizer call-sites have the same shape — wrapper sits below a
sticky page header and TanStack would otherwise place rows starting at
the scroll-element top, unmounting rows that are still in the viewport
and at higher offsets refusing to render at all:

- Artists grid view (Artists.tsx + ArtistsGridView.tsx) — under the
  sticky title + filter row + alphabet bar (~150–250 px depending on
  alphabet wrap).
- Artists list view (Artists.tsx + ArtistsListView.tsx) — same header
  stack; flat letter/row stream means a noticeable jump on long
  libraries.
- Composers list view (Composers.tsx) — identical header stack to
  Artists.
- VirtualSongList — ~36 px sticky song-list header inside its own
  scroll container; the offset was small enough to be absorbed by
  overscan, but the pattern was the same so wire it up for consistency.

Each call-site now feeds wrapRef + scroll-element lookup into
useVirtualizerScrollMargin and forwards the value into useVirtualizer +
the translateY of each rendered row.

* docs(changelog): note PR #766 under Fixed in v1.46.0

src/components/VirtualCardGrid.tsx

@@ -1,9 +1,10 @@
-import React, { useLayoutEffect, useRef, useState } from 'react';
+import React, { useRef } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { APP_MAIN_SCROLL_VIEWPORT_ID } from '../constants/appScroll';
 import { useElementClientHeightById } from '../hooks/useResizeClientHeight';
 import { useCardGridMetrics } from '../hooks/useCardGridMetrics';
 import { useRemeasureGridVirtualizer } from '../hooks/useRemeasureGridVirtualizer';
+import { useVirtualizerScrollMargin } from '../hooks/useVirtualizerScrollMargin';
 import type { CardGridRowHeightVariant } from '../utils/cardGridLayout';
 
 export type VirtualCardGridProps<T> = {
@@ -43,33 +44,14 @@ export function VirtualCardGrid<T>({
   const mainScrollViewportHeight = useElementClientHeightById(APP_MAIN_SCROLL_VIEWPORT_ID);
   const overscan = Math.max(2, Math.ceil(mainScrollViewportHeight / Math.max(1, rowHeightEst)));
 
-  // Vertical offset between the scroll element's top and this grid's top.
-  // react-virtual computes row positions relative to the scroll element, so
-  // without this margin a grid that sits below tall content (e.g. the
-  // "More by …" rail under a long tracklist) would have its first rows
-  // placed at negative positions and unmounted as out-of-viewport.
-  const [scrollMargin, setScrollMargin] = useState(0);
-  useLayoutEffect(() => {
-    if (disableVirtualization) return;
-    const wrap = wrapRef.current;
-    const scrollEl = document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID);
-    if (!wrap || !scrollEl) return;
-    const measure = () => {
-      const margin =
-        wrap.getBoundingClientRect().top
-        - scrollEl.getBoundingClientRect().top
-        + scrollEl.scrollTop;
-      setScrollMargin(prev => (Math.abs(prev - margin) < 1 ? prev : margin));
-    };
-    measure();
-    const ro = new ResizeObserver(measure);
-    ro.observe(scrollEl);
-    // Anything above the grid resizing (tracklist growing, hero collapsing)
-    // shifts the grid down; observe the scroll content too so we re-measure.
-    const scrollContent = scrollEl.firstElementChild as Element | null;
-    if (scrollContent) ro.observe(scrollContent);
-    return () => ro.disconnect();
-  }, [disableVirtualization, layoutSignal, virtualRowCount]);
+  const scrollMargin = useVirtualizerScrollMargin(
+    wrapRef,
+    () => document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID),
+    {
+      active: !disableVirtualization,
+      deps: [layoutSignal, virtualRowCount],
+    },
+  );
 
   const virtualizer = useVirtualizer({
     count: disableVirtualization ? 0 : virtualRowCount,