[UI] Improve template card spacing and responsive image display (#3930)

Co-authored-by: github-actions <github-actions@github.com>

browser_tests/tests/templates.spec.ts

@@ -142,4 +142,136 @@ test.describe('Templates', () => {
     // Expect the title to be used as fallback for the template categories
     await expect(comfyPage.page.getByLabel('FALLBACK CATEGORY')).toBeVisible()
   })
+
+  test('template cards are dynamically sized and responsive', async ({
+    comfyPage
+  }) => {
+    // Open templates dialog
+    await comfyPage.executeCommand('Comfy.BrowseTemplates')
+    await expect(comfyPage.templates.content).toBeVisible()
+
+    // Wait for at least one template card to appear
+    await expect(comfyPage.page.locator('.template-card').first()).toBeVisible({
+      timeout: 5000
+    })
+
+    // Take snapshot of the template grid
+    const templateGrid = comfyPage.templates.content.locator('.grid').first()
+    await expect(templateGrid).toBeVisible()
+    await expect(templateGrid).toHaveScreenshot('template-grid-desktop.png')
+
+    // Check cards at mobile viewport size
+    await comfyPage.page.setViewportSize({ width: 640, height: 800 })
+    await expect(templateGrid).toBeVisible()
+    await expect(templateGrid).toHaveScreenshot('template-grid-mobile.png')
+
+    // Check cards at tablet size
+    await comfyPage.page.setViewportSize({ width: 1024, height: 800 })
+    await expect(templateGrid).toBeVisible()
+    await expect(templateGrid).toHaveScreenshot('template-grid-tablet.png')
+  })
+
+  test('hover effects work on template cards', async ({ comfyPage }) => {
+    // Open templates dialog
+    await comfyPage.executeCommand('Comfy.BrowseTemplates')
+    await expect(comfyPage.templates.content).toBeVisible()
+
+    // Get a template card
+    const firstCard = comfyPage.page.locator('.template-card').first()
+    await expect(firstCard).toBeVisible({ timeout: 5000 })
+
+    // Take snapshot before hover
+    await expect(firstCard).toHaveScreenshot('template-card-before-hover.png')
+
+    // Hover over the card
+    await firstCard.hover()
+
+    // Take snapshot after hover to verify hover effect
+    await expect(firstCard).toHaveScreenshot('template-card-after-hover.png')
+  })
+
+  test('template cards descriptions adjust height dynamically', async ({
+    comfyPage
+  }) => {
+    // Setup test by intercepting templates response to inject cards with varying description lengths
+    await comfyPage.page.route('**/templates/index.json', async (route, _) => {
+      const response = [
+        {
+          moduleName: 'default',
+          title: 'Test Templates',
+          type: 'image',
+          templates: [
+            {
+              name: 'short-description',
+              title: 'Short Description',
+              mediaType: 'image',
+              mediaSubtype: 'webp',
+              description: 'This is a short description.'
+            },
+            {
+              name: 'medium-description',
+              title: 'Medium Description',
+              mediaType: 'image',
+              mediaSubtype: 'webp',
+              description:
+                'This is a medium length description that should take up two lines on most displays.'
+            },
+            {
+              name: 'long-description',
+              title: 'Long Description',
+              mediaType: 'image',
+              mediaSubtype: 'webp',
+              description:
+                'This is a much longer description that should definitely wrap to multiple lines. It contains enough text to demonstrate how the cards handle varying amounts of content while maintaining a consistent layout grid.'
+            }
+          ]
+        }
+      ]
+      await route.fulfill({
+        status: 200,
+        body: JSON.stringify(response),
+        headers: {
+          'Content-Type': 'application/json',
+          'Cache-Control': 'no-store'
+        }
+      })
+    })
+
+    // Mock the thumbnail images to avoid 404s
+    await comfyPage.page.route('**/templates/**.webp', async (route) => {
+      const headers = {
+        'Content-Type': 'image/webp',
+        'Cache-Control': 'no-store'
+      }
+      await route.fulfill({
+        status: 200,
+        path: 'browser_tests/assets/example.webp',
+        headers
+      })
+    })
+
+    // Open templates dialog
+    await comfyPage.executeCommand('Comfy.BrowseTemplates')
+    await expect(comfyPage.templates.content).toBeVisible()
+
+    // Verify cards are visible with varying content lengths
+    await expect(
+      comfyPage.page.getByText('This is a short description.')
+    ).toBeVisible({ timeout: 5000 })
+    await expect(
+      comfyPage.page.getByText('This is a medium length description')
+    ).toBeVisible({ timeout: 5000 })
+    await expect(
+      comfyPage.page.getByText('This is a much longer description')
+    ).toBeVisible({ timeout: 5000 })
+
+    // Take snapshot of a grid with specific cards
+    const templateGrid = comfyPage.templates.content
+      .locator('.grid:has-text("Short Description")')
+      .first()
+    await expect(templateGrid).toBeVisible()
+    await expect(templateGrid).toHaveScreenshot(
+      'template-grid-varying-content.png'
+    )
+  })
 })

src/components/templates/TemplateWorkflowCard.spec.ts

@@ -0,0 +1,205 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import TemplateWorkflowCard from '@/components/templates/TemplateWorkflowCard.vue'
+import { TemplateInfo } from '@/types/workflowTemplateTypes'
+
+vi.mock('@/components/templates/thumbnails/AudioThumbnail.vue', () => ({
+  default: {
+    name: 'AudioThumbnail',
+    template: '<div class="mock-audio-thumbnail" :data-src="src"></div>',
+    props: ['src']
+  }
+}))
+
+vi.mock('@/components/templates/thumbnails/CompareSliderThumbnail.vue', () => ({
+  default: {
+    name: 'CompareSliderThumbnail',
+    template:
+      '<div class="mock-compare-slider" :data-base="baseImageSrc" :data-overlay="overlayImageSrc"></div>',
+    props: ['baseImageSrc', 'overlayImageSrc', 'alt', 'isHovered']
+  }
+}))
+
+vi.mock('@/components/templates/thumbnails/DefaultThumbnail.vue', () => ({
+  default: {
+    name: 'DefaultThumbnail',
+    template: '<div class="mock-default-thumbnail" :data-src="src"></div>',
+    props: ['src', 'alt', 'isHovered', 'isVideo', 'hoverZoom']
+  }
+}))
+
+vi.mock('@/components/templates/thumbnails/HoverDissolveThumbnail.vue', () => ({
+  default: {
+    name: 'HoverDissolveThumbnail',
+    template:
+      '<div class="mock-hover-dissolve" :data-base="baseImageSrc" :data-overlay="overlayImageSrc"></div>',
+    props: ['baseImageSrc', 'overlayImageSrc', 'alt', 'isHovered']
+  }
+}))
+
+vi.mock('@vueuse/core', () => ({
+  useElementHover: () => ref(false)
+}))
+
+vi.mock('@/scripts/api', () => ({
+  api: {
+    fileURL: (path: string) => `/fileURL${path}`,
+    apiURL: (path: string) => `/apiURL${path}`
+  }
+}))
+
+describe('TemplateWorkflowCard', () => {
+  const createTemplate = (overrides = {}): TemplateInfo => ({
+    name: 'test-template',
+    mediaType: 'image',
+    mediaSubtype: 'png',
+    thumbnailVariant: 'default',
+    description: 'Test description',
+    ...overrides
+  })
+
+  const mountCard = (props = {}) => {
+    return mount(TemplateWorkflowCard, {
+      props: {
+        sourceModule: 'default',
+        categoryTitle: 'Test Category',
+        loading: false,
+        template: createTemplate(),
+        ...props
+      },
+      global: {
+        stubs: {
+          Card: {
+            template:
+              '<div class="card" @click="$emit(\'click\')"><slot name="header" /><slot name="content" /></div>',
+            props: ['dataTestid', 'pt']
+          },
+          ProgressSpinner: {
+            template: '<div class="progress-spinner"></div>'
+          }
+        }
+      }
+    })
+  }
+
+  it('emits loadWorkflow event when clicked', async () => {
+    const wrapper = mountCard({
+      template: createTemplate({ name: 'test-workflow' })
+    })
+    await wrapper.find('.card').trigger('click')
+    expect(wrapper.emitted('loadWorkflow')).toBeTruthy()
+    expect(wrapper.emitted('loadWorkflow')?.[0]).toEqual(['test-workflow'])
+  })
+
+  it('shows loading spinner when loading is true', () => {
+    const wrapper = mountCard({ loading: true })
+    expect(wrapper.find('.progress-spinner').exists()).toBe(true)
+  })
+
+  it('renders audio thumbnail for audio media type', () => {
+    const wrapper = mountCard({
+      template: createTemplate({ mediaType: 'audio' })
+    })
+    expect(wrapper.find('.mock-audio-thumbnail').exists()).toBe(true)
+  })
+
+  it('renders compare slider thumbnail for compareSlider variant', () => {
+    const wrapper = mountCard({
+      template: createTemplate({ thumbnailVariant: 'compareSlider' })
+    })
+    expect(wrapper.find('.mock-compare-slider').exists()).toBe(true)
+  })
+
+  it('renders hover dissolve thumbnail for hoverDissolve variant', () => {
+    const wrapper = mountCard({
+      template: createTemplate({ thumbnailVariant: 'hoverDissolve' })
+    })
+    expect(wrapper.find('.mock-hover-dissolve').exists()).toBe(true)
+  })
+
+  it('renders default thumbnail by default', () => {
+    const wrapper = mountCard()
+    expect(wrapper.find('.mock-default-thumbnail').exists()).toBe(true)
+  })
+
+  it('passes correct props to default thumbnail for video', () => {
+    const wrapper = mountCard({
+      template: createTemplate({ mediaType: 'video' })
+    })
+    const thumbnail = wrapper.find('.mock-default-thumbnail')
+    expect(thumbnail.exists()).toBe(true)
+  })
+
+  it('uses zoomHover scale when variant is zoomHover', () => {
+    const wrapper = mountCard({
+      template: createTemplate({ thumbnailVariant: 'zoomHover' })
+    })
+    expect(wrapper.find('.mock-default-thumbnail').exists()).toBe(true)
+  })
+
+  it('displays localized title for default source module', () => {
+    const wrapper = mountCard({
+      sourceModule: 'default',
+      template: createTemplate({ localizedTitle: 'My Localized Title' })
+    })
+    expect(wrapper.text()).toContain('My Localized Title')
+  })
+
+  it('displays template name as title for non-default source modules', () => {
+    const wrapper = mountCard({
+      sourceModule: 'custom',
+      template: createTemplate({ name: 'custom-template' })
+    })
+    expect(wrapper.text()).toContain('custom-template')
+  })
+
+  it('displays localized description for default source module', () => {
+    const wrapper = mountCard({
+      sourceModule: 'default',
+      template: createTemplate({
+        localizedDescription: 'My Localized Description'
+      })
+    })
+    expect(wrapper.text()).toContain('My Localized Description')
+  })
+
+  it('processes description for non-default source modules', () => {
+    const wrapper = mountCard({
+      sourceModule: 'custom',
+      template: createTemplate({ description: 'custom_module-description' })
+    })
+    expect(wrapper.text()).toContain('custom module description')
+  })
+
+  it('generates correct thumbnail URLs for default source module', () => {
+    const wrapper = mountCard({
+      sourceModule: 'default',
+      template: createTemplate({
+        name: 'my-template',
+        mediaSubtype: 'jpg'
+      })
+    })
+    const vm = wrapper.vm as any
+    expect(vm.baseThumbnailSrc).toBe('/fileURL/templates/my-template-1.jpg')
+    expect(vm.overlayThumbnailSrc).toBe('/fileURL/templates/my-template-2.jpg')
+  })
+
+  it('generates correct thumbnail URLs for custom source module', () => {
+    const wrapper = mountCard({
+      sourceModule: 'custom-module',
+      template: createTemplate({
+        name: 'my-template',
+        mediaSubtype: 'png'
+      })
+    })
+    const vm = wrapper.vm as any
+    expect(vm.baseThumbnailSrc).toBe(
+      '/apiURL/workflow_templates/custom-module/my-template.png'
+    )
+    expect(vm.overlayThumbnailSrc).toBe(
+      '/apiURL/workflow_templates/custom-module/my-template.png'
+    )
+  })
+})

src/components/templates/TemplateWorkflowCard.vue

@@ -20,6 +20,10 @@
               :overlay-image-src="overlayThumbnailSrc"
               :alt="title"
               :is-hovered="isHovered"
+              :is-video="
+                template.mediaType === 'video' ||
+                template.mediaSubtype === 'webp'
+              "
             />
           </template>
           <template v-else-if="template.thumbnailVariant === 'hoverDissolve'">
@@ -28,6 +32,10 @@
               :overlay-image-src="overlayThumbnailSrc"
               :alt="title"
               :is-hovered="isHovered"
+              :is-video="
+                template.mediaType === 'video' ||
+                template.mediaSubtype === 'webp'
+              "
             />
           </template>
           <template v-else>
@@ -35,6 +43,10 @@
               :src="baseThumbnailSrc"
               :alt="title"
               :is-hovered="isHovered"
+              :is-video="
+                template.mediaType === 'video' ||
+                template.mediaSubtype === 'webp'
+              "
               :hover-zoom="
                 template.thumbnailVariant === 'zoomHover'
                   ? UPSCALE_ZOOM_SCALE
@@ -52,18 +64,13 @@
     <template #content>
       <div class="flex items-center px-4 py-3">
         <div class="flex-1 flex flex-col">
-          <h3 class="line-clamp-2 text-lg font-normal mb-0 h-12" :title="title">
+          <h3 class="line-clamp-2 text-lg font-normal mb-0" :title="title">
             {{ title }}
           </h3>
           <p class="line-clamp-2 text-sm text-muted grow" :title="description">
             {{ description }}
           </p>
         </div>
-        <div
-          class="flex md:hidden xl:flex items-center justify-center ml-4 w-10 h-10 rounded-full"
-        >
-          <i class="pi pi-angle-right text-2xl" />
-        </div>
       </div>
     </template>
   </Card>

src/components/templates/TemplateWorkflowView.spec.ts

@@ -0,0 +1,133 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import TemplateWorkflowView from '@/components/templates/TemplateWorkflowView.vue'
+import { TemplateInfo } from '@/types/workflowTemplateTypes'
+
+vi.mock('primevue/dataview', () => ({
+  default: {
+    name: 'DataView',
+    template: `
+      <div class="p-dataview">
+        <div class="dataview-header"><slot name="header"></slot></div>
+        <div class="dataview-content">
+          <slot name="grid" :items="value"></slot>
+        </div>
+      </div>
+    `,
+    props: ['value', 'layout', 'lazy', 'pt']
+  }
+}))
+
+vi.mock('primevue/selectbutton', () => ({
+  default: {
+    name: 'SelectButton',
+    template:
+      '<div class="p-selectbutton"><slot name="option" :option="modelValue"></slot></div>',
+    props: ['modelValue', 'options', 'allowEmpty']
+  }
+}))
+
+vi.mock('@/components/templates/TemplateWorkflowCard.vue', () => ({
+  default: {
+    template: `
+      <div 
+        class="mock-template-card" 
+        :data-name="template.name"
+        :data-source-module="sourceModule"
+        :data-category-title="categoryTitle"
+        :data-loading="loading"
+        @click="$emit('loadWorkflow', template.name)"
+      ></div>
+    `,
+    props: ['sourceModule', 'categoryTitle', 'loading', 'template'],
+    emits: ['loadWorkflow']
+  }
+}))
+
+vi.mock('@/components/templates/TemplateWorkflowList.vue', () => ({
+  default: {
+    template: '<div class="mock-template-list"></div>',
+    props: ['sourceModule', 'categoryTitle', 'loading', 'templates'],
+    emits: ['loadWorkflow']
+  }
+}))
+
+vi.mock('@vueuse/core', () => ({
+  useLocalStorage: () => 'grid'
+}))
+
+describe('TemplateWorkflowView', () => {
+  const createTemplate = (name: string): TemplateInfo => ({
+    name,
+    mediaType: 'image',
+    mediaSubtype: 'png',
+    thumbnailVariant: 'default',
+    description: `Description for ${name}`
+  })
+
+  const mountView = (props = {}) => {
+    return mount(TemplateWorkflowView, {
+      props: {
+        title: 'Test Templates',
+        sourceModule: 'default',
+        categoryTitle: 'Test Category',
+        templates: [
+          createTemplate('template-1'),
+          createTemplate('template-2'),
+          createTemplate('template-3')
+        ],
+        loading: null,
+        ...props
+      }
+    })
+  }
+
+  it('renders template cards for each template', () => {
+    const wrapper = mountView()
+    const cards = wrapper.findAll('.mock-template-card')
+
+    expect(cards.length).toBe(3)
+    expect(cards[0].attributes('data-name')).toBe('template-1')
+    expect(cards[1].attributes('data-name')).toBe('template-2')
+    expect(cards[2].attributes('data-name')).toBe('template-3')
+  })
+
+  it('emits loadWorkflow event when clicked', async () => {
+    const wrapper = mountView()
+    const card = wrapper.find('.mock-template-card')
+
+    await card.trigger('click')
+
+    expect(wrapper.emitted()).toHaveProperty('loadWorkflow')
+    // Check that the emitted event contains the template name
+    const emitted = wrapper.emitted('loadWorkflow')
+    expect(emitted).toBeTruthy()
+    expect(emitted?.[0][0]).toBe('template-1')
+  })
+
+  it('passes correct props to template cards', () => {
+    const wrapper = mountView({
+      sourceModule: 'custom',
+      categoryTitle: 'Custom Category'
+    })
+
+    const card = wrapper.find('.mock-template-card')
+    expect(card.exists()).toBe(true)
+    expect(card.attributes('data-source-module')).toBe('custom')
+    expect(card.attributes('data-category-title')).toBe('Custom Category')
+  })
+
+  it('applies loading state correctly to cards', () => {
+    const wrapper = mountView({
+      loading: 'template-2'
+    })
+
+    const cards = wrapper.findAll('.mock-template-card')
+
+    // Only the second card should have loading=true since loading="template-2"
+    expect(cards[0].attributes('data-loading')).toBe('false')
+    expect(cards[1].attributes('data-loading')).toBe('true')
+    expect(cards[2].attributes('data-loading')).toBe('false')
+  })
+})

src/components/templates/TemplateWorkflowView.vue

@@ -34,7 +34,7 @@
 
     <template #grid="{ items }">
       <div
-        class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] auto-rows-fr gap-8 justify-items-center"
+        class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-x-4 gap-y-8 px-4 justify-items-center"
       >
         <TemplateWorkflowCard
           v-for="template in items"

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

@@ -0,0 +1,35 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
+
+vi.mock('@/components/templates/thumbnails/BaseThumbnail.vue', () => ({
+  default: {
+    name: 'BaseThumbnail',
+    template: '<div class="base-thumbnail"><slot /></div>'
+  }
+}))
+
+describe('AudioThumbnail', () => {
+  const mountThumbnail = (props = {}) => {
+    return mount(AudioThumbnail, {
+      props: {
+        src: '/test-audio.mp3',
+        ...props
+      }
+    })
+  }
+
+  it('renders an audio element with correct src', () => {
+    const wrapper = mountThumbnail()
+    const audio = wrapper.find('audio')
+    expect(audio.exists()).toBe(true)
+    expect(audio.attributes('src')).toBe('/test-audio.mp3')
+  })
+
+  it('uses BaseThumbnail as container', () => {
+    const wrapper = mountThumbnail()
+    const baseThumbnail = wrapper.findComponent({ name: 'BaseThumbnail' })
+    expect(baseThumbnail.exists()).toBe(true)
+  })
+})

src/components/templates/thumbnails/AudioThumbnail.vue

@@ -1,6 +1,6 @@
 <template>
   <BaseThumbnail>
-    <div class="w-64 h-64 flex items-center justify-center p-4">
+    <div class="w-full h-full flex items-center justify-center p-4">
       <audio controls class="w-full relative" :src="src" @click.stop />
     </div>
   </BaseThumbnail>

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

@@ -0,0 +1,66 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { nextTick } from 'vue'
+
+import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
+
+vi.mock('@vueuse/core', () => ({
+  useEventListener: vi.fn()
+}))
+
+describe('BaseThumbnail', () => {
+  const mountThumbnail = (props = {}, slots = {}) => {
+    return mount(BaseThumbnail, {
+      props,
+      slots: {
+        default: '<img src="/test.jpg" alt="test" />',
+        ...slots
+      }
+    })
+  }
+
+  it('renders slot content', () => {
+    const wrapper = mountThumbnail()
+    expect(wrapper.find('img').exists()).toBe(true)
+  })
+
+  it('applies hover zoom with correct style', () => {
+    const wrapper = mountThumbnail({ isHovered: true })
+    const contentDiv = wrapper.find('.transform-gpu')
+    expect(contentDiv.attributes('style')).toContain('transform')
+    expect(contentDiv.attributes('style')).toContain('scale')
+  })
+
+  it('applies custom hover zoom value', () => {
+    const wrapper = mountThumbnail({ hoverZoom: 10, isHovered: true })
+    const contentDiv = wrapper.find('.transform-gpu')
+    expect(contentDiv.attributes('style')).toContain('scale(1.1)')
+  })
+
+  it('does not apply scale when not hovered', () => {
+    const wrapper = mountThumbnail({ isHovered: false })
+    const contentDiv = wrapper.find('.transform-gpu')
+    expect(contentDiv.attributes('style')).toBeUndefined()
+  })
+
+  it('shows error state when image fails to load', async () => {
+    const wrapper = mountThumbnail()
+    const vm = wrapper.vm as any
+
+    // Manually set error since useEventListener is mocked
+    vm.error = true
+    await nextTick()
+
+    expect(wrapper.find('.pi-file').exists()).toBe(true)
+    expect(wrapper.find('.transform-gpu').exists()).toBe(false)
+  })
+
+  it('applies transition classes to content', () => {
+    const wrapper = mountThumbnail()
+    const contentDiv = wrapper.find('.transform-gpu')
+    expect(contentDiv.classes()).toContain('transform-gpu')
+    expect(contentDiv.classes()).toContain('transition-transform')
+    expect(contentDiv.classes()).toContain('duration-1000')
+    expect(contentDiv.classes()).toContain('ease-out')
+  })
+})

src/components/templates/thumbnails/BaseThumbnail.vue

@@ -3,7 +3,7 @@
     <div
       v-if="!error"
       ref="contentRef"
-      class="w-64 h-64 object-cover transform-gpu transition-transform duration-1000 ease-out"
+      class="w-full h-full transform-gpu transition-transform duration-1000 ease-out"
       :style="
         isHovered ? { transform: `scale(${1 + hoverZoom / 100})` } : undefined
       "

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

@@ -0,0 +1,74 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+import { ref } from 'vue'
+
+import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
+
+vi.mock('@/components/templates/thumbnails/BaseThumbnail.vue', () => ({
+  default: {
+    name: 'BaseThumbnail',
+    template: '<div class="base-thumbnail"><slot /></div>',
+    props: ['isHovered']
+  }
+}))
+
+vi.mock('@vueuse/core', () => ({
+  useMouseInElement: () => ({
+    elementX: ref(50),
+    elementWidth: ref(100),
+    isOutside: ref(false)
+  })
+}))
+
+describe('CompareSliderThumbnail', () => {
+  const mountThumbnail = (props = {}) => {
+    return mount(CompareSliderThumbnail, {
+      props: {
+        baseImageSrc: '/base-image.jpg',
+        overlayImageSrc: '/overlay-image.jpg',
+        alt: 'Comparison Image',
+        isVideo: false,
+        ...props
+      }
+    })
+  }
+
+  it('renders both base and overlay images', () => {
+    const wrapper = mountThumbnail()
+    const images = wrapper.findAll('img')
+    expect(images.length).toBe(2)
+    expect(images[0].attributes('src')).toBe('/base-image.jpg')
+    expect(images[1].attributes('src')).toBe('/overlay-image.jpg')
+  })
+
+  it('applies correct alt text to both images', () => {
+    const wrapper = mountThumbnail({ alt: 'Custom Alt Text' })
+    const images = wrapper.findAll('img')
+    expect(images[0].attributes('alt')).toBe('Custom Alt Text')
+    expect(images[1].attributes('alt')).toBe('Custom Alt Text')
+  })
+
+  it('applies clip-path style to overlay image', () => {
+    const wrapper = mountThumbnail()
+    const overlay = wrapper.findAll('img')[1]
+    expect(overlay.attributes('style')).toContain('clip-path')
+  })
+
+  it('renders slider divider', () => {
+    const wrapper = mountThumbnail()
+    const divider = wrapper.find('.bg-white\\/30')
+    expect(divider.exists()).toBe(true)
+  })
+
+  it('positions slider based on default value', () => {
+    const wrapper = mountThumbnail()
+    const divider = wrapper.find('.bg-white\\/30')
+    expect(divider.attributes('style')).toContain('left: 21%')
+  })
+
+  it('passes isHovered prop to BaseThumbnail', () => {
+    const wrapper = mountThumbnail({ isHovered: true })
+    const baseThumbnail = wrapper.findComponent({ name: 'BaseThumbnail' })
+    expect(baseThumbnail.props('isHovered')).toBe(true)
+  })
+})

src/components/templates/thumbnails/CompareSliderThumbnail.vue

@@ -1,11 +1,23 @@
 <template>
   <BaseThumbnail :is-hovered="isHovered">
-    <img :src="baseImageSrc" :alt="alt" class="w-full h-full object-cover" />
+    <img
+      :src="baseImageSrc"
+      :alt="alt"
+      :class="
+        isVideoType
+          ? 'w-full h-full object-cover'
+          : 'max-w-full max-h-64 object-contain'
+      "
+    />
     <div ref="containerRef" class="absolute inset-0">
       <img
         :src="overlayImageSrc"
         :alt="alt"
-        class="w-full h-full object-cover"
+        :class="
+          isVideoType
+            ? 'w-full h-full object-cover'
+            : 'max-w-full max-h-64 object-contain'
+        "
         :style="{
           clipPath: `inset(0 ${100 - sliderPosition}% 0 0)`
         }"
@@ -28,13 +40,20 @@ import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
 
 const SLIDER_START_POSITION = 21
 
-const { isHovered } = defineProps<{
+const { baseImageSrc, overlayImageSrc, isHovered, isVideo } = defineProps<{
   baseImageSrc: string
   overlayImageSrc: string
   alt: string
   isHovered?: boolean
+  isVideo?: boolean
 }>()
 
+const isVideoType =
+  isVideo ||
+  baseImageSrc?.toLowerCase().endsWith('.webp') ||
+  overlayImageSrc?.toLowerCase().endsWith('.webp') ||
+  false
+
 const sliderPosition = ref(SLIDER_START_POSITION)
 const containerRef = ref<HTMLElement | null>(null)
 

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

@@ -0,0 +1,102 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'
+
+vi.mock('@/components/templates/thumbnails/BaseThumbnail.vue', () => ({
+  default: {
+    name: 'BaseThumbnail',
+    template: '<div class="base-thumbnail"><slot /></div>',
+    props: ['hoverZoom', 'isHovered']
+  }
+}))
+
+describe('DefaultThumbnail', () => {
+  const mountThumbnail = (props = {}) => {
+    return mount(DefaultThumbnail, {
+      props: {
+        src: '/test-image.jpg',
+        alt: 'Test Image',
+        hoverZoom: 5,
+        ...props
+      }
+    })
+  }
+
+  it('renders image with correct src and alt', () => {
+    const wrapper = mountThumbnail()
+    const img = wrapper.find('img')
+    expect(img.attributes('src')).toBe('/test-image.jpg')
+    expect(img.attributes('alt')).toBe('Test Image')
+  })
+
+  it('applies scale transform when hovered', () => {
+    const wrapper = mountThumbnail({
+      isHovered: true,
+      hoverZoom: 10
+    })
+    const img = wrapper.find('img')
+    expect(img.attributes('style')).toContain('scale(1.1)')
+  })
+
+  it('does not apply scale transform when not hovered', () => {
+    const wrapper = mountThumbnail({
+      isHovered: false
+    })
+    const img = wrapper.find('img')
+    expect(img.attributes('style')).toBeUndefined()
+  })
+
+  it('applies video styling for video type', () => {
+    const wrapper = mountThumbnail({
+      isVideo: true
+    })
+    const img = wrapper.find('img')
+    expect(img.classes()).toContain('w-full')
+    expect(img.classes()).toContain('h-full')
+    expect(img.classes()).toContain('object-cover')
+  })
+
+  it('applies image styling for non-video type', () => {
+    const wrapper = mountThumbnail({
+      isVideo: false
+    })
+    const img = wrapper.find('img')
+    expect(img.classes()).toContain('max-w-full')
+    expect(img.classes()).toContain('object-contain')
+  })
+
+  it('applies correct styling for webp images', () => {
+    const wrapper = mountThumbnail({
+      src: '/test-video.webp',
+      isVideo: true
+    })
+    const img = wrapper.find('img')
+    expect(img.classes()).toContain('object-cover')
+  })
+
+  it('image is not draggable', () => {
+    const wrapper = mountThumbnail()
+    const img = wrapper.find('img')
+    expect(img.attributes('draggable')).toBe('false')
+  })
+
+  it('applies transition classes', () => {
+    const wrapper = mountThumbnail()
+    const img = wrapper.find('img')
+    expect(img.classes()).toContain('transform-gpu')
+    expect(img.classes()).toContain('transition-transform')
+    expect(img.classes()).toContain('duration-300')
+    expect(img.classes()).toContain('ease-out')
+  })
+
+  it('passes correct props to BaseThumbnail', () => {
+    const wrapper = mountThumbnail({
+      hoverZoom: 20,
+      isHovered: true
+    })
+    const baseThumbnail = wrapper.findComponent({ name: 'BaseThumbnail' })
+    expect(baseThumbnail.props('hoverZoom')).toBe(20)
+    expect(baseThumbnail.props('isHovered')).toBe(true)
+  })
+})

src/components/templates/thumbnails/DefaultThumbnail.vue

@@ -1,11 +1,16 @@
 <template>
   <BaseThumbnail :hover-zoom="hoverZoom" :is-hovered="isHovered">
-    <div class="overflow-hidden">
+    <div class="overflow-hidden w-full h-full flex items-center justify-center">
       <img
         :src="src"
         :alt="alt"
         draggable="false"
-        class="w-64 h-64 object-cover transform-gpu transition-transform duration-300 ease-out"
+        :class="[
+          'transform-gpu transition-transform duration-300 ease-out',
+          isVideoType
+            ? 'w-full h-full object-cover'
+            : 'max-w-full max-h-64 object-contain'
+        ]"
         :style="
           isHovered ? { transform: `scale(${1 + hoverZoom / 100})` } : undefined
         "
@@ -17,10 +22,13 @@
 <script setup lang="ts">
 import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
 
-defineProps<{
+const { src, isVideo } = defineProps<{
   src: string
   alt: string
   hoverZoom: number
   isHovered?: boolean
+  isVideo?: boolean
 }>()
+
+const isVideoType = isVideo ?? (src?.toLowerCase().endsWith('.webp') || false)
 </script>

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

@@ -0,0 +1,82 @@
+import { mount } from '@vue/test-utils'
+import { describe, expect, it, vi } from 'vitest'
+
+import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
+
+vi.mock('@/components/templates/thumbnails/BaseThumbnail.vue', () => ({
+  default: {
+    name: 'BaseThumbnail',
+    template: '<div class="base-thumbnail"><slot /></div>',
+    props: ['isHovered']
+  }
+}))
+
+describe('HoverDissolveThumbnail', () => {
+  const mountThumbnail = (props = {}) => {
+    return mount(HoverDissolveThumbnail, {
+      props: {
+        baseImageSrc: '/base-image.jpg',
+        overlayImageSrc: '/overlay-image.jpg',
+        alt: 'Dissolve Image',
+        isHovered: false,
+        isVideo: false,
+        ...props
+      }
+    })
+  }
+
+  it('renders both base and overlay images', () => {
+    const wrapper = mountThumbnail()
+    const images = wrapper.findAll('img')
+    expect(images.length).toBe(2)
+    expect(images[0].attributes('src')).toBe('/base-image.jpg')
+    expect(images[1].attributes('src')).toBe('/overlay-image.jpg')
+  })
+
+  it('applies correct alt text to both images', () => {
+    const wrapper = mountThumbnail({ alt: 'Custom Alt Text' })
+    const images = wrapper.findAll('img')
+    expect(images[0].attributes('alt')).toBe('Custom Alt Text')
+    expect(images[1].attributes('alt')).toBe('Custom Alt Text')
+  })
+
+  it('makes overlay image visible when hovered', () => {
+    const wrapper = mountThumbnail({ isHovered: true })
+    const overlayImage = wrapper.findAll('img')[1]
+    expect(overlayImage.classes()).toContain('opacity-100')
+    expect(overlayImage.classes()).not.toContain('opacity-0')
+  })
+
+  it('makes overlay image hidden when not hovered', () => {
+    const wrapper = mountThumbnail({ isHovered: false })
+    const overlayImage = wrapper.findAll('img')[1]
+    expect(overlayImage.classes()).toContain('opacity-0')
+    expect(overlayImage.classes()).not.toContain('opacity-100')
+  })
+
+  it('passes isHovered prop to BaseThumbnail', () => {
+    const wrapper = mountThumbnail({ isHovered: true })
+    const baseThumbnail = wrapper.findComponent({ name: 'BaseThumbnail' })
+    expect(baseThumbnail.props('isHovered')).toBe(true)
+  })
+
+  it('applies transition classes to overlay image', () => {
+    const wrapper = mountThumbnail()
+    const overlayImage = wrapper.findAll('img')[1]
+    expect(overlayImage.classes()).toContain('transition-opacity')
+    expect(overlayImage.classes()).toContain('duration-300')
+  })
+
+  it('applies correct positioning to both images', () => {
+    const wrapper = mountThumbnail()
+    const images = wrapper.findAll('img')
+
+    // Check base image
+    expect(images[0].classes()).toContain('absolute')
+    expect(images[0].classes()).toContain('inset-0')
+
+    // Check overlay image
+    expect(images[1].classes()).toContain('absolute')
+    expect(images[1].classes()).toContain('inset-0')
+  })
+})

src/components/templates/thumbnails/HoverDissolveThumbnail.vue

@@ -5,14 +5,24 @@
         :src="baseImageSrc"
         :alt="alt"
         draggable="false"
-        class="absolute inset-0 w-64 h-64 object-cover"
+        class="absolute inset-0"
+        :class="
+          isVideoType
+            ? 'w-full h-full object-cover'
+            : 'max-w-full max-h-64 object-contain'
+        "
       />
       <img
         :src="overlayImageSrc"
         :alt="alt"
         draggable="false"
-        class="absolute inset-0 w-64 h-64 object-cover transition-opacity duration-300"
-        :class="{ 'opacity-100': isHovered, 'opacity-0': !isHovered }"
+        class="absolute inset-0 transition-opacity duration-300"
+        :class="[
+          isVideoType
+            ? 'w-full h-full object-cover'
+            : 'max-w-full max-h-64 object-contain',
+          { 'opacity-100': isHovered, 'opacity-0': !isHovered }
+        ]"
       />
     </div>
   </BaseThumbnail>
@@ -21,10 +31,17 @@
 <script setup lang="ts">
 import BaseThumbnail from '@/components/templates/thumbnails/BaseThumbnail.vue'
 
-defineProps<{
+const { baseImageSrc, overlayImageSrc, isVideo } = defineProps<{
   baseImageSrc: string
   overlayImageSrc: string
   alt: string
   isHovered: boolean
+  isVideo?: boolean
 }>()
+
+const isVideoType =
+  isVideo ||
+  baseImageSrc?.toLowerCase().endsWith('.webp') ||
+  overlayImageSrc?.toLowerCase().endsWith('.webp') ||
+  false
 </script>