Fix HoverDissolveThumbnail layering issue preventing dissolve effect (#5191)

* [fix] Resolve HoverDissolveThumbnail layering issue preventing dissolve effect

- Fix layer stacking problem where LazyImage containers blocked overlay visibility
- Restructure template with separate positioning containers for base and overlay images
- Use z-index to ensure proper layering of overlay image above base image
- Update CSS classes from absolute positioning on images to container-based positioning
- Update test assertions to match new class structure
- Ensure hover dissolve transition works correctly from opacity-0 to opacity-100

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Address code review feedback

- Use size-full instead of w-full h-full for cleaner Tailwind classes
- Update tests to use classList approach instead of string contains
- Maintain same functionality while improving code quality

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: bymyself <cbyrne@comfy.org>

src/components/templates/thumbnails/HoverDissolveThumbnail.spec.ts

@@ -94,18 +94,16 @@ describe('HoverDissolveThumbnail', () => {
 
     // Check base image
     const baseImageClass = lazyImages[0].props('imageClass')
-    const baseClassString = Array.isArray(baseImageClass)
+    const baseClassList = Array.isArray(baseImageClass)
-      ? baseImageClass.join(' ')
+      ? baseImageClass
-      : baseImageClass
+      : baseImageClass.split(' ')
-    expect(baseClassString).toContain('absolute')
+    expect(baseClassList).toContain('size-full')
-    expect(baseClassString).toContain('inset-0')
 
     // Check overlay image
     const overlayImageClass = lazyImages[1].props('imageClass')
-    const overlayClassString = Array.isArray(overlayImageClass)
+    const overlayClassList = Array.isArray(overlayImageClass)
-      ? overlayImageClass.join(' ')
+      ? overlayImageClass
-      : overlayImageClass
+      : overlayImageClass.split(' ')
-    expect(overlayClassString).toContain('absolute')
+    expect(overlayClassList).toContain('size-full')
-    expect(overlayClassString).toContain('inset-0')
   })
 })

src/components/templates/thumbnails/HoverDissolveThumbnail.vue

@@ -1,12 +1,20 @@
 <template>
   <BaseThumbnail :is-hovered="isHovered">
     <div class="relative w-full h-full">
-      <LazyImage :src="baseImageSrc" :alt="alt" :image-class="baseImageClass" />
+      <div class="absolute inset-0">
-      <LazyImage
+        <LazyImage
-        :src="overlayImageSrc"
+          :src="baseImageSrc"
-        :alt="alt"
+          :alt="alt"
-        :image-class="overlayImageClass"
+          :image-class="baseImageClass"
-      />
+        />
+      </div>
+      <div class="absolute inset-0 z-10">
+        <LazyImage
+          :src="overlayImageSrc"
+          :alt="alt"
+          :image-class="overlayImageClass"
+        />
+      </div>
     </div>
   </BaseThumbnail>
 </template>
@@ -32,14 +40,15 @@ const isVideoType =
   false
 
 const baseImageClass = computed(() => {
-  return `absolute inset-0 ${isVideoType ? 'w-full h-full object-cover' : 'max-w-full max-h-64 object-contain'}`
+  const sizeClasses = isVideoType
+    ? 'size-full object-cover'
+    : 'size-full object-contain'
+  return sizeClasses
 })
 
 const overlayImageClass = computed(() => {
-  const baseClasses = 'absolute inset-0 transition-opacity duration-300'
+  const baseClasses = 'size-full transition-opacity duration-300'
-  const sizeClasses = isVideoType
+  const sizeClasses = isVideoType ? 'object-cover' : 'object-contain'
-    ? 'w-full h-full object-cover'
-    : 'max-w-full max-h-64 object-contain'
   const opacityClasses = isHovered ? 'opacity-100' : 'opacity-0'
   return `${baseClasses} ${sizeClasses} ${opacityClasses}`
 })