src/shared/ui/VirtualList/VirtualList.svelte

@@ -211,9 +211,14 @@ const throttledNearBottom = throttle((lastVisibleIndex: number) => {
 }, 200); // 200ms debounce
 
 // Calculate top/bottom padding for spacer elements
+// In CSS Grid, gap creates space BETWEEN elements.
+// The top spacer should place the first row at its virtual offset.
+// Grid layout: [spacer]--gap--[row0]--gap--[row1]...
+// spacer height + gap = first row's start position
 const topPad = $derived(
     virtualizer.items.length > 0 ? virtualizer.items[0].start - gap : 0,
 );
+
 const botPad = $derived(
     virtualizer.items.length > 0
         ? Math.max(
@@ -261,15 +266,18 @@ $effect(() => {
 {#snippet content()}
     <div
         style:grid-template-columns="repeat({columns}, minmax(0, 1fr))"
+        style:gap="{gap}px"
         class="grid w-full"
     >
         <!-- Top spacer for padding-based virtualization -->
-        <div
+        {#if topPad > 0}
-            style:grid-column="1 / -1"
+            <div
-            style:height="{topPad}px"
+                style:grid-column="1 / -1"
-            class="shrink-0"
+                style:height="{topPad}px"
-        >
+                class="shrink-0"
-        </div>
+            >
+            </div>
+        {/if}
 
         {#each virtualizer.items as row (row.key)}
             {#if row.index < rowCount}