From d3bf8eacebb5db5967cbdc62ec1a7892aa208bd2 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Thu, 22 May 2025 15:23:32 +0800
Subject: [PATCH] Add container padding properties to VirtualScroller and
 adjust card padding

---
 static/css/components/card.css     |  2 +-
 static/js/utils/VirtualScroller.js | 16 ++++++++++++++--
 static/js/utils/infiniteScroll.js  |  2 ++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/static/css/components/card.css b/static/css/components/card.css
index b13236a9..eaa1da81 100644
--- a/static/css/components/card.css
+++ b/static/css/components/card.css
@@ -466,7 +466,7 @@
     display: block;
     position: relative;
     margin: 0 auto;
-    padding: 6px 0; /* Add top/bottom padding equivalent to card padding */
+    padding: 4px 0; /* Add top/bottom padding equivalent to card padding */
     height: auto;
     width: 100%;
     max-width: 1400px; /* Keep the max-width from original grid */
diff --git a/static/js/utils/VirtualScroller.js b/static/js/utils/VirtualScroller.js
index 82790539..368da303 100644
--- a/static/js/utils/VirtualScroller.js
+++ b/static/js/utils/VirtualScroller.js
@@ -15,6 +15,10 @@ export class VirtualScroller {
         this.itemAspectRatio = 896/1152; // Aspect ratio of cards
         this.rowGap = options.rowGap || 20; // Add vertical gap between rows (default 20px)
         
+        // Add container padding properties
+        this.containerPaddingTop = options.containerPaddingTop || 4; // Default top padding from CSS
+        this.containerPaddingBottom = options.containerPaddingBottom || 4; // Default bottom padding from CSS
+        
         // Add data windowing enable/disable flag
         this.enableDataWindowing = options.enableDataWindowing !== undefined ? options.enableDataWindowing : false;
 
@@ -74,6 +78,10 @@ export class VirtualScroller {
         this.gridElement.style.position = 'relative';
         this.gridElement.style.minHeight = '0';
         
+        // Apply padding directly to ensure consistency
+        this.gridElement.style.paddingTop = `${this.containerPaddingTop}px`;
+        this.gridElement.style.paddingBottom = `${this.containerPaddingBottom}px`;
+        
         // Place the spacer inside the grid container
         this.gridElement.appendChild(this.spacerElement);
     }
@@ -336,8 +344,11 @@ export class VirtualScroller {
         // Add row gaps to the total height calculation
         const totalHeight = totalRows * this.itemHeight + (totalRows - 1) * this.rowGap;
         
+        // Include container padding in the total height
+        const spacerHeight = totalHeight + this.containerPaddingTop + this.containerPaddingBottom;
+        
         // Update spacer height to represent all items
-        this.spacerElement.style.height = `${totalHeight}px`;
+        this.spacerElement.style.height = `${spacerHeight}px`;
     }
 
     getVisibleRange() {
@@ -465,7 +476,8 @@ export class VirtualScroller {
         const col = index % this.columnsCount;
         
         // Calculate precise positions with row gap included
-        const topPos = row * (this.itemHeight + this.rowGap);
+        // Add the top padding to account for container padding
+        const topPos = this.containerPaddingTop + (row * (this.itemHeight + this.rowGap));
         
         // Position correctly with leftOffset (no need to add padding as absolute
         // positioning is already relative to the padding edge of the container)
diff --git a/static/js/utils/infiniteScroll.js b/static/js/utils/infiniteScroll.js
index 4c77e78e..2b0c72d4 100644
--- a/static/js/utils/infiniteScroll.js
+++ b/static/js/utils/infiniteScroll.js
@@ -122,6 +122,8 @@ async function initializeVirtualScroll(pageType) {
             fetchItemsFn: fetchDataFn,
             pageSize: 100,
             rowGap: 20,
+            containerPaddingTop: 4,
+            containerPaddingBottom: 4,
             enableDataWindowing: false // Explicitly set to false to disable data windowing
         });