Fix: virtual grid scrolling bug when container is rendered with emtpy items (switching tabs) (#4251)

Author: christian-byrne

src/components/common/VirtualGrid.vue

@@ -92,12 +92,21 @@ whenever(
 const updateItemSize = () => {
   if (container.value) {
     const firstItem = container.value.querySelector('[data-virtual-grid-item]')
-    itemHeight.value = firstItem?.clientHeight || defaultItemHeight
-    itemWidth.value = firstItem?.clientWidth || defaultItemWidth
+
+    // Don't update item size if the first item is not rendered yet
+    if (!firstItem?.clientHeight || !firstItem?.clientWidth) return
+
+    if (itemHeight.value !== firstItem.clientHeight) {
+      itemHeight.value = firstItem.clientHeight
+    }
+    if (itemWidth.value !== firstItem.clientWidth) {
+      itemWidth.value = firstItem.clientWidth
+    }
   }
 }
 const onResize = debounce(updateItemSize, resizeDebounce)
 watch([width, height], onResize, { flush: 'post' })
+whenever(() => items, updateItemSize)
 onBeforeUnmount(() => {
   onResize.cancel() // Clear pending debounced calls
 })

src/components/dialog/content/manager/ManagerDialogContent.vue

@@ -219,10 +219,6 @@ const {
 const filterMissingPacks = (packs: components['schemas']['Node'][]) =>
   packs.filter((pack) => !comfyManagerStore.isPackInstalled(pack.id))
 
-whenever(selectedTab, () => {
-  pageNumber.value = 0
-})
-
 const isUpdateAvailableTab = computed(
   () => selectedTab.value?.id === ManagerTab.UpdateAvailable
 )
@@ -468,9 +464,10 @@ let gridContainer: HTMLElement | null = null
 onMounted(() => {
   gridContainer = document.getElementById('results-grid')
 })
-watch(searchQuery, () => {
+watch([searchQuery, selectedTab], () => {
   gridContainer ??= document.getElementById('results-grid')
   if (gridContainer) {
+    pageNumber.value = 0
     gridContainer.scrollTop = 0
   }
 })