fix: lod wrapper and some style stuff

some users may have a very large number of files, so we only need to
request/render the ones that are visible.

┆Issue is synchronized with this [Notion
page](https://www.notion.so/PR-5904-feat-widgets-lazy-load-images-in-FormDropdown-2816d73d36508195b283ff469061f3f3)
by [Unito](https://www.unito.io)

Co-authored-by: Claude <noreply@anthropic.com>

browser_tests/tests/userSelectView.spec.ts

@@ -35,25 +35,9 @@ test.describe('User Select View', () => {
   test('Can choose existing user', async ({ userSelectPage, page }) => {
     await page.goto(userSelectPage.url)
     await expect(page).toHaveURL(userSelectPage.selectionUrl)
-
     await userSelectPage.existingUserSelect.click()
-
-    const dropdownList = page.locator('.p-select-list')
-    await expect(dropdownList).toBeVisible()
-
-    // Try to click first option if it exists
-    const firstOption = page.locator('.p-select-list .p-select-option').first()
-    await firstOption.waitFor({ state: 'visible', timeout: 5000 })
-
-    if ((await firstOption.count()) > 0) {
-      await firstOption.click()
-    } else {
-      // No options available - close dropdown and use new user input
-      await page.keyboard.press('Escape')
-      await userSelectPage.newUserInput.fill(`test-user-${Date.now()}`)
-    }
-
+    await page.locator('.p-select-list .p-select-option').first().click()
     await userSelectPage.nextButton.click()
-    await expect(page).toHaveURL(userSelectPage.url, { timeout: 15000 })
+    await expect(page).toHaveURL(userSelectPage.url)
   })
 })

browser_tests/tests/vueNodes/interactions/links/linkInteraction.spec.ts

@@ -300,7 +300,6 @@ test.describe('Vue Node Link Interaction', () => {
         'vue-node-input-drag-ctrl-alt.png'
       )
     } finally {
-      // Cleanup operations: silently ignore errors if state is already clean
       await comfyMouse.drop().catch(() => {})
       await comfyPage.page.keyboard.up('Alt').catch(() => {})
       await comfyPage.page.keyboard.up('Control').catch(() => {})
@@ -468,7 +467,6 @@ test.describe('Vue Node Link Interaction', () => {
       await comfyMouse.drop()
       dropped = true
     } finally {
-      // Cleanup: ensure mouse is released if drop failed
       if (!dropped) {
         await comfyMouse.drop().catch(() => {})
       }
@@ -559,7 +557,6 @@ test.describe('Vue Node Link Interaction', () => {
       await comfyMouse.drop()
       dropPending = false
     } finally {
-      // Cleanup: ensure mouse and keyboard are released if test fails
       if (dropPending) await comfyMouse.drop().catch(() => {})
       if (shiftHeld) await comfyPage.page.keyboard.up('Shift').catch(() => {})
     }
@@ -692,7 +689,6 @@ test.describe('Vue Node Link Interaction', () => {
         'vue-node-shift-output-multi-link.png'
       )
     } finally {
-      // Cleanup: ensure mouse and keyboard are released if test fails
       if (dropPending) await comfyMouse.drop().catch(() => {})
       if (shiftHeld) await comfyPage.page.keyboard.up('Shift').catch(() => {})
     }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@comfyorg/comfyui-frontend",
   "private": true,
-  "version": "1.28.4",
+  "version": "1.28.5",
   "type": "module",
   "repository": "https://github.com/Comfy-Org/ComfyUI_frontend",
   "homepage": "https://comfy.org",

src/renderer/extensions/vueNodes/VideoPreview.vue

@@ -89,7 +89,9 @@
 
     <div class="relative">
       <!-- Video Dimensions -->
-      <div class="text-white text-xs text-center mt-2">
+      <div
+        class="text-stone-700 dark-theme:text-white text-xs text-center mt-2 lod-toggle"
+      >
         <span v-if="videoError" class="text-red-400">
           {{ $t('g.errorLoadingVideo') }}
         </span>

src/renderer/extensions/vueNodes/components/NodeHeader.vue

@@ -4,7 +4,7 @@
   </div>
   <div
     v-else
-    class="lg-node-header p-4 rounded-t-2xl cursor-move w-full"
+    class="lg-node-header p-4 rounded-t-2xl cursor-move"
     :style="headerStyle"
     :data-testid="`node-header-${nodeData?.id || ''}`"
     @dblclick="handleDoubleClick"

src/renderer/extensions/vueNodes/widgets/components/form/dropdown/FormDropdownMenuItem.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, inject, ref } from 'vue'
 
+import LazyImage from '@/components/common/LazyImage.vue'
 import { cn } from '@/utils/tailwindUtil'
 
 import { AssetKindKey, type LayoutMode } from './types'
@@ -102,10 +103,11 @@ function handleVideoLoad(event: Event) {
         muted
         @loadeddata="handleVideoLoad"
       />
-      <img
+      <LazyImage
         v-else-if="mediaSrc"
         :src="mediaSrc"
-        class="size-full object-cover"
+        :alt="name"
+        image-class="size-full object-cover"
         @load="handleImageLoad"
       />
       <div