From 288d9deae22d437fcd7857b368827db7b62c24f6 Mon Sep 17 00:00:00 2001 From: Caleb Allen Date: Sat, 7 Mar 2026 10:49:06 -0500 Subject: [PATCH] fix(queue-panel): set flow layout _itemSize to match actual track item height The previous fix (fixed CSS height on .track-item) was insufficient because lit-virtualizer's flow layout defaults to estimating items at 100px tall. With 20k items, the difference between 100px estimate and 49px actual creates a ~1M px scroll height that collapses as items get measured, triggering scroll error corrections (programmatic scrollTo calls) that fight the native scrollbar during drag. Setting _itemSize to { height: 49 } via the flow() config ensures the initial scroll size estimate matches reality, eliminating the scroll error corrections that caused the scrollbar thumb to desync from the mouse when dragging down. --- frontend/src/components/queue-panel/queue-panel.ts | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/frontend/src/components/queue-panel/queue-panel.ts b/frontend/src/components/queue-panel/queue-panel.ts index ac3772f..1ac902e 100644 --- a/frontend/src/components/queue-panel/queue-panel.ts +++ b/frontend/src/components/queue-panel/queue-panel.ts @@ -127,7 +127,15 @@ export class QueuePanel }; private panelWidth = DEFAULT_WIDTH; - private flowLayout = flow(); + // _itemSize is an internal property applied via Object.assign in BaseLayout's + // config setter. Setting it to match the actual fixed .track-item height (49px) + // prevents lit-virtualizer's scroll error correction from fighting the native + // scrollbar during drag on large lists (20k+ items). Without this, the default + // estimate of 100px causes massive scroll height recalculation as items get + // measured, which calls scrollTo() and desynchronizes the scrollbar thumb. + private flowLayout = flow({ + _itemSize: { width: 100, height: 49 }, + } as Parameters[0]); /** * Track the last currentIndex so we only auto-scroll