Reduce CLS on podcast episode list scroll and on page load

[JeremyLoh]

• Resolves Remove CLS due to LoadingDisplay not wrapping all UI elements #400

For <PodcastEpisodeList>, replace the margin-top with padding-top to prevent layout shift in react-virtuoso

• https://virtuoso.dev/troubleshooting/#list-does-not-scroll-to-the-bottom--items-jump-around
• List does not scroll to the bottom / items jump around
  • This is the most common setup error. It happens because the DOM elements inside the items (or the items themselves) have margins. Margins are hard to measure, more so if they collapse. Some elements (for example, p, h*, ul) have default margins.
    Fix
  • Use your browser inspector (the computed tab next to styles) and examine the list items. Margins are usually easy to spot. Replace them with padding.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
xtal	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 8, 2025 3:26pm