Best way of adding padding to the first list item

[yaeszlo]

I want to add padding to the first item of the list, or fake it somehow, but bottom line is that I want to avoid clipping like this

In android I would do that with clipToPadding false, but I wasn't able to find alternative for css. I thought of maybe targeting the first child of the list, but the the list is nested multiple times. Any ideas?

[Corrl]

Do you only want to add padding to the very first row? Then my approach would be to modify the VirtualList.svelte and use the class directive to add the padding to the row

{#each visible as row (row.index)}
  <svelte-virtual-list-row class:first-row={row.index === 0}>
      <slot item={row.data}>Missing template</slot>
  </svelte-virtual-list-row>
{/each}

<style>
  .first-row {
  padding-top: 4rem;
  }
</style>

The first currently displayed row could be targeted via css like this

svelte-virtual-list-row:nth-child(1) {
  padding-top: 4rem;
}