From a1e9e440edd5f0a2037f613c94a35e095656e3c9 Mon Sep 17 00:00:00 2001
From: Will Miao <13051207myq@gmail.com>
Date: Fri, 7 Mar 2025 06:50:31 +0800
Subject: [PATCH] Enhance infinite scroll functionality; increase sentinel
 height and ensure full width, trigger layout recalculation on initialization.
 Try to fix: https://github.com/willmiao/ComfyUI-Lora-Manager/issues/24

---
 static/js/utils/infiniteScroll.js | 11 +++++++++--
 templates/loras.html              |  2 +-
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/static/js/utils/infiniteScroll.js b/static/js/utils/infiniteScroll.js
index 448ede8d..c0c566a5 100644
--- a/static/js/utils/infiniteScroll.js
+++ b/static/js/utils/infiniteScroll.js
@@ -22,8 +22,15 @@ export function initializeInfiniteScroll() {
     } else {
         const sentinel = document.createElement('div');
         sentinel.id = 'scroll-sentinel';
-        sentinel.style.height = '10px';
+        sentinel.style.height = '20px'; // Increase height a bit
+        sentinel.style.width = '100%';  // Ensure full width
+        sentinel.style.position = 'relative'; // Ensure it's in the normal flow
         document.getElementById('loraGrid').appendChild(sentinel);
         state.observer.observe(sentinel);
     }
-} 
\ No newline at end of file
+
+    // Force layout recalculation
+    setTimeout(() => {
+        window.dispatchEvent(new Event('resize'));
+    }, 100);
+}
\ No newline at end of file
diff --git a/templates/loras.html b/templates/loras.html
index e981e9ff..1eff091e 100644
--- a/templates/loras.html
+++ b/templates/loras.html
@@ -85,7 +85,7 @@
         {% else %}
             {% include 'components/controls.html' %}
             <!-- Lora卡片容器 -->
-            <div class="card-grid" id="loraGrid">
+            <div class="card-grid" id="loraGrid" style="height: calc(100vh - [header-height]px); overflow-y: auto;">
                 <!-- Cards will be dynamically inserted here -->
             </div>
         {% endif %}