Add virtual scrolling for large recipient lists in Distribution

[pragmaticAweds]

Context

The Distribution page renders all recipients in a standard <Table> with one <TableRow> per recipient. When importing a large CSV (the upload area accepts files up to 10MB), the DOM could contain hundreds or thousands of rows. This causes: slow rendering, janky scrolling, high memory usage, and potentially frozen UI on lower-powered devices. The page already accepts large CSV files — it needs to handle the resulting large lists gracefully.

What Success Looks Like

• Recipient lists with 100+ entries render smoothly without UI jank
• The table uses virtualized rendering — only visible rows are in the DOM
• Scrolling is smooth at 60fps even with 1000+ recipients
• Adding/removing recipients doesn't cause full re-renders of the entire list
• The existing CSV import flow works unchanged — only the rendering is virtualized

Implementation Guidance

• apps/web/src/app/(overview)/distribution/page.tsx — the recipient table (lines 309-368)
• apps/web/src/components/organisms/RecipientTable.tsx — the molecule-level table component
• Use @tanstack/react-virtual (TanStack Virtual) — already compatible with the project's TanStack ecosystem (React Query, React Table are already dependencies)
• Alternative: react-window is lighter but TanStack Virtual integrates better with the existing stack
• Keep the table header sticky and outside the virtual scroll area
• Set a fixed row height (~48-52px) for accurate virtualization calculations
• Test with 500+ recipients imported via CSV to verify performance