From c68d7559a074bcbd4b26163677d5cdc323c59dea Mon Sep 17 00:00:00 2001
From: Will Miao <willmiao.dev@gmail.com>
Date: Sun, 19 Jul 2026 22:40:07 +0800
Subject: [PATCH] fix(widget): correct reorder drop indicator position when
 container is scrolled

The drop indicator top position was calculated using only
getBoundingClientRect() offsets (post-CSS-transform viewport space)
without accounting for container.scrollTop (pre-transform layout space).
This caused the indicator to drift upward as the user scrolled down,
eventually disappearing entirely.

Fixed by adding container.scrollTop to the position calculation and
only dividing the GBCR visual-diff portion by scale, since scrollTop
is already in pre-transform coordinate space.
---
 web/comfyui/loras_widget_events.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/web/comfyui/loras_widget_events.js b/web/comfyui/loras_widget_events.js
index 5e927e27..648280af 100644
--- a/web/comfyui/loras_widget_events.js
+++ b/web/comfyui/loras_widget_events.js
@@ -438,7 +438,9 @@ export function initReorderDrag(dragHandle, loraName, widget, renderFunction) {
       if (firstEntry) {
         const rect = firstEntry.getBoundingClientRect();
         const containerRect = container.getBoundingClientRect();
-        dropIndicator.style.top = `${(rect.top - containerRect.top - 2) / scale}px`;
+        // Convert GBCR visual offset to container-local space (rect/containerRect are post-scale,
+        // scrollTop is pre-scale), so only the visual-diff portion is divided by scale
+        dropIndicator.style.top = `${(rect.top - containerRect.top) / scale + container.scrollTop - 2}px`;
         dropIndicator.style.opacity = '1';
       }
     } else if (targetIndex < entries.length) {
@@ -447,7 +449,7 @@ export function initReorderDrag(dragHandle, loraName, widget, renderFunction) {
       if (targetEntry) {
         const rect = targetEntry.getBoundingClientRect();
         const containerRect = container.getBoundingClientRect();
-        dropIndicator.style.top = `${(rect.top - containerRect.top - 2) / scale}px`;
+        dropIndicator.style.top = `${(rect.top - containerRect.top) / scale + container.scrollTop - 2}px`;
         dropIndicator.style.opacity = '1';
       }
     } else {
@@ -456,7 +458,7 @@ export function initReorderDrag(dragHandle, loraName, widget, renderFunction) {
       if (lastEntry) {
         const rect = lastEntry.getBoundingClientRect();
         const containerRect = container.getBoundingClientRect();
-        dropIndicator.style.top = `${(rect.bottom - containerRect.top + 2) / scale}px`;
+        dropIndicator.style.top = `${(rect.bottom - containerRect.top) / scale + container.scrollTop + 2}px`;
         dropIndicator.style.opacity = '1';
       }
     }