From 80a9802c42492ff8dca8d160d4f6381a2627bd47 Mon Sep 17 00:00:00 2001
From: Ilia Mashkov <hikkikomori7@gmail.com>
Date: Fri, 27 Feb 2026 19:07:13 +0300
Subject: [PATCH] fix(VirtualList): don't render top spacer if topPad is bellow
 0

---
 src/shared/ui/VirtualList/VirtualList.svelte | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/shared/ui/VirtualList/VirtualList.svelte b/src/shared/ui/VirtualList/VirtualList.svelte
index 93d2e9d..def96af 100644
--- a/src/shared/ui/VirtualList/VirtualList.svelte
+++ b/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
-            style:grid-column="1 / -1"
-            style:height="{topPad}px"
-            class="shrink-0"
-        >
-        </div>
+        {#if topPad > 0}
+            <div
+                style:grid-column="1 / -1"
+                style:height="{topPad}px"
+                class="shrink-0"
+            >
+            </div>
+        {/if}
 
         {#each virtualizer.items as row (row.key)}
             {#if row.index < rowCount}