From a212a70b1dae52f823f95e1e0c160c13b4d0b074 Mon Sep 17 00:00:00 2001
From: Arcadio Quintero <oidacra@gmail.com>
Date: Fri, 3 Jul 2026 15:16:58 -0400
Subject: [PATCH 1/5] feat(ui): unify content thumbnails into
 dot-content-thumbnail component

Introduce a single Angular presentational thumbnail viewer in libs/ui that
replaces both the Stencil dot-contentlet-thumbnail web component and the
Angular dot-temp-file-thumbnail across the whole admin app.

- New dot-content-thumbnail viewer with per-type internal renderers
  (image/svg/pdf via img, playable/first-frame video, Material Symbols icon),
  a loading state machine (PrimeNG-skeleton shimmer, 300ms cross-fade reveal)
  and icon fallback on media error.
- Consumers pass the contentlet directly ([contentlet] + [options]) or a
  pre-resolved model ([thumbnail]); mappers replicate the legacy Stencil URL
  strategies (/dA, /contentAsset, pdf_page, svg raw asset) with deliberate
  fixes: SVG resolves before the fieldVariable path (never rasterized, renders
  object-contain) and image/* content types qualify as images when isImage is
  absent (image-editor saves).
- Icon glyph auto-scales via container queries (iconSize input as override)
  and recolors through the --dot-content-thumbnail-icon-color CSS property.
- Playable videos are never masked by the skeleton: the native element owns
  its loading UX; first-frame previews use a #t=0.1 media fragment instead of
  the legacy canvas approach.
- Migrate all 10 usages: file-field preview (temp + contentlet), asset-search
  card, browser-selector dataview, content-drive folder list, UVE palette,
  block-editor contentlet block + suggestions, relationship field (list and
  select-existing dialog).
- Delete dot-temp-file-thumbnail (single consumer, absorbed) and mark the
  Stencil dot-contentlet-thumbnail as deprecated (kept for dot-card-contentlet
  and legacy JSP).
- Fix a pre-existing crash in the file-field preview info dialog when a temp
  file arrives without metadata (image-editor save) by synthesizing fallback
  metadata.

Refs: #36295
---
 .../src/lib/block-editor.module.ts            |   6 +-
 .../contentlet-block.component.html           |   7 +-
 .../suggestions-list-item.component.css       |   6 +-
 .../suggestions-list-item.component.html      |   6 +-
 .../src/lib/shared/shared.module.ts           |   5 +-
 .../dotcms-webcomponents/src/components.d.ts  |  28 ++
 .../dot-contentlet-thumbnail.tsx              |   7 +
 .../dot-contentlet-thumbnail/readme.md        |   6 +
 .../dot-file-field-preview.component.html     |  16 +-
 .../dot-file-field-preview.component.scss     |  11 -
 .../dot-file-field-preview.component.spec.ts  |  30 +-
 .../dot-file-field-preview.component.ts       |  23 +-
 .../dot-relationship-field.component.html     |  14 +-
 .../dot-relationship-field.component.ts       |   9 +-
 ...dot-select-existing-content.component.html |   4 +-
 .../dot-select-existing-content.component.ts  |  13 +-
 .../dot-folder-list-view.component.html       |   5 +-
 .../dot-folder-list-view.component.spec.ts    |   6 +-
 .../dot-folder-list-view.component.ts         |   4 +-
 .../dot-uve-palette-contentlet.component.html |  11 +-
 ...t-uve-palette-contentlet.component.spec.ts |  15 +-
 .../dot-uve-palette-contentlet.component.ts   |  24 +-
 core-web/libs/ui/src/index.ts                 |   4 +-
 .../dot-asset-card.component.html             |   4 +-
 .../dot-asset-card.component.scss             |  13 +-
 .../dot-asset-card.component.spec.ts          |   6 +-
 .../dot-asset-card.component.ts               |   8 +-
 .../dot-dataview/dot-dataview.component.html  |   6 +-
 .../dot-dataview/dot-dataview.component.scss  |   3 +-
 .../dot-dataview/dot-dataview.component.ts    |   8 +-
 .../dot-content-thumbnail-icon.component.ts   |  30 ++
 .../dot-content-thumbnail-image.component.ts  |  33 ++
 .../dot-content-thumbnail-video.component.ts  |  48 ++
 .../dot-content-thumbnail.component.spec.ts   | 319 ++++++++++++
 .../dot-content-thumbnail.component.ts        | 189 ++++++++
 .../models/dot-content-thumbnail.model.ts     |  49 ++
 .../utils/dot-content-thumbnail.utils.spec.ts | 459 ++++++++++++++++++
 .../utils/dot-content-thumbnail.utils.ts      | 317 ++++++++++++
 .../dot-temp-file-thumbnail.component.html    |  34 --
 .../dot-temp-file-thumbnail.component.scss    |   1 -
 .../dot-temp-file-thumbnail.component.spec.ts | 135 ------
 .../dot-temp-file-thumbnail.component.ts      | 126 -----
 42 files changed, 1609 insertions(+), 439 deletions(-)
 create mode 100644 core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts
 create mode 100644 core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-image.component.ts
 create mode 100644 core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-video.component.ts
 create mode 100644 core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.spec.ts
 create mode 100644 core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts
 create mode 100644 core-web/libs/ui/src/lib/components/dot-content-thumbnail/models/dot-content-thumbnail.model.ts
 create mode 100644 core-web/libs/ui/src/lib/components/dot-content-thumbnail/utils/dot-content-thumbnail.utils.spec.ts
 create mode 100644 core-web/libs/ui/src/lib/components/dot-content-thumbnail/utils/dot-content-thumbnail.utils.ts
 delete mode 100644 core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.html
 delete mode 100644 core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.scss
 delete mode 100644 core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.spec.ts
 delete mode 100644 core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.ts

diff --git a/core-web/libs/block-editor/src/lib/block-editor.module.ts b/core-web/libs/block-editor/src/lib/block-editor.module.ts
index d4ea4982160..bd63a98a684 100644
--- a/core-web/libs/block-editor/src/lib/block-editor.module.ts
+++ b/core-web/libs/block-editor/src/lib/block-editor.module.ts
@@ -29,7 +29,8 @@ import {
     DotFieldRequiredDirective,
     DotMessagePipe,
     DotSpinnerComponent,
-    DotContentletStatusBadgeComponent
+    DotContentletStatusBadgeComponent,
+    DotContentThumbnailComponent
 } from '@dotcms/ui';
 
 //Editor
@@ -78,7 +79,8 @@ const initTranslations = (dotMessageService: DotMessageService) => {
         DragHandleDirective,
         DotContextMenuComponent,
         DotAddButtonComponent,
-        DotContentletStatusBadgeComponent
+        DotContentletStatusBadgeComponent,
+        DotContentThumbnailComponent
     ],
     declarations: [
         EditorDirective,
diff --git a/core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.html b/core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.html
index 5b5a8577dc8..23755727367 100644
--- a/core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.html
+++ b/core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.html
@@ -2,12 +2,7 @@
     <p-card class="flex! flex-row! items-center justify-start">
         <ng-template #header>
             <div class="box-border flex h-full items-center p-4! pr-0!">
-                <dot-contentlet-thumbnail
-                    [width]="94"
-                    [height]="94"
-                    [iconSize]="'72px'"
-                    [contentlet]="data"
-                    class="relative block h-[94px] w-[94px]" />
+                <dot-content-thumbnail [contentlet]="data" class="relative h-[94px] w-[94px]" />
             </div>
         </ng-template>
 
diff --git a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.css b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.css
index 0dc1936a60c..0a8694ea23b 100644
--- a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.css
+++ b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.css
@@ -28,9 +28,7 @@
     width: 32px;
 }
 
-.icon-wrapper dot-contentlet-thumbnail {
-    align-items: center;
-    display: block;
+.icon-wrapper dot-content-thumbnail {
     position: relative;
     width: 42px;
     height: 42px;
@@ -43,7 +41,7 @@
 }
 
 .icon-wrapper.page,
-.icon-wrapper.page dot-contentlet-thumbnail {
+.icon-wrapper.page dot-content-thumbnail {
     flex-basis: 64px;
     height: 64px;
     width: 64px;
diff --git a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html
index c21a1b35c9a..17e6b3fe2a3 100644
--- a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html
+++ b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html
@@ -3,11 +3,7 @@
         <i class="material-symbols-outlined">{{ url }}</i>
     } @else {
         @if (data?.contentlet) {
-            <dot-contentlet-thumbnail
-                [contentlet]="data.contentlet"
-                [width]="42"
-                [height]="42"
-                [iconSize]="'42px'" />
+            <dot-content-thumbnail [contentlet]="data.contentlet" />
         } @else {
             <img [src]="url" alt="" />
         }
diff --git a/core-web/libs/block-editor/src/lib/shared/shared.module.ts b/core-web/libs/block-editor/src/lib/shared/shared.module.ts
index a49172b5bf6..38bfeca5080 100644
--- a/core-web/libs/block-editor/src/lib/shared/shared.module.ts
+++ b/core-web/libs/block-editor/src/lib/shared/shared.module.ts
@@ -5,7 +5,7 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ButtonModule } from 'primeng/button';
 import { TagModule } from 'primeng/tag';
 
-import { DotContentletStatusBadgeComponent } from '@dotcms/ui';
+import { DotContentletStatusBadgeComponent, DotContentThumbnailComponent } from '@dotcms/ui';
 
 // Shared
 import {
@@ -26,7 +26,8 @@ import { SuggestionsService } from './services';
         ReactiveFormsModule,
         ButtonModule,
         TagModule,
-        DotContentletStatusBadgeComponent
+        DotContentletStatusBadgeComponent,
+        DotContentThumbnailComponent
     ],
     declarations: [
         SuggestionsComponent,
diff --git a/core-web/libs/dotcms-webcomponents/src/components.d.ts b/core-web/libs/dotcms-webcomponents/src/components.d.ts
index d6e8a0d372e..328b8083b09 100644
--- a/core-web/libs/dotcms-webcomponents/src/components.d.ts
+++ b/core-web/libs/dotcms-webcomponents/src/components.d.ts
@@ -450,6 +450,13 @@ export namespace Components {
          */
         "size": string;
     }
+    /**
+     * @deprecated Angular code must use `DotContentThumbnailComponent`
+     * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet
+     * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`.
+     * This web component remains only for Stencil-internal use
+     * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295.
+     */
     interface DotContentletThumbnail {
         /**
           * @default ''
@@ -1840,6 +1847,13 @@ declare global {
         prototype: HTMLDotContentletLockIconElement;
         new (): HTMLDotContentletLockIconElement;
     };
+    /**
+     * @deprecated Angular code must use `DotContentThumbnailComponent`
+     * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet
+     * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`.
+     * This web component remains only for Stencil-internal use
+     * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295.
+     */
     interface HTMLDotContentletThumbnailElement extends Components.DotContentletThumbnail, HTMLStencilElement {
     }
     var HTMLDotContentletThumbnailElement: {
@@ -2751,6 +2765,13 @@ declare namespace LocalJSX {
          */
         "size"?: string;
     }
+    /**
+     * @deprecated Angular code must use `DotContentThumbnailComponent`
+     * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet
+     * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`.
+     * This web component remains only for Stencil-internal use
+     * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295.
+     */
     interface DotContentletThumbnail {
         /**
           * @default ''
@@ -3891,6 +3912,13 @@ declare module "@stencil/core" {
              */
             "dot-contentlet-icon": LocalJSX.DotContentletIcon & JSXBase.HTMLAttributes<HTMLDotContentletIconElement>;
             "dot-contentlet-lock-icon": LocalJSX.DotContentletLockIcon & JSXBase.HTMLAttributes<HTMLDotContentletLockIconElement>;
+            /**
+             * @deprecated Angular code must use `DotContentThumbnailComponent`
+             * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet
+             * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`.
+             * This web component remains only for Stencil-internal use
+             * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295.
+             */
             "dot-contentlet-thumbnail": LocalJSX.DotContentletThumbnail & JSXBase.HTMLAttributes<HTMLDotContentletThumbnailElement>;
             "dot-context-menu": LocalJSX.DotContextMenu & JSXBase.HTMLAttributes<HTMLDotContextMenuElement>;
             "dot-data-view-button": LocalJSX.DotDataViewButton & JSXBase.HTMLAttributes<HTMLDotDataViewButtonElement>;
diff --git a/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx b/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx
index 3c5869f4ad0..0bd228d800f 100644
--- a/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx
+++ b/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/dot-contentlet-thumbnail.tsx
@@ -5,6 +5,13 @@ import { Component, h, Host, Prop, State } from '@stencil/core';
 
 import { DotContentletItem } from '../../models/dot-contentlet-item.model';
 
+/**
+ * @deprecated Angular code must use `DotContentThumbnailComponent`
+ * (`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet
+ * via its `contentlet`/`options` inputs or a resolved model via `thumbnail`.
+ * This web component remains only for Stencil-internal use
+ * (`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295.
+ */
 @Component({
     tag: 'dot-contentlet-thumbnail',
     styleUrl: 'dot-contentlet-thumbnail.scss'
diff --git a/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/readme.md b/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/readme.md
index e78b1227215..b827f615f28 100644
--- a/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/readme.md
+++ b/core-web/libs/dotcms-webcomponents/src/elements/dot-contentlet-thumbnail/readme.md
@@ -3,6 +3,12 @@
 <!-- Auto Generated Below -->
 
 
+> **[DEPRECATED]** Angular code must use `DotContentThumbnailComponent`
+(`dot-content-thumbnail`) from `@dotcms/ui` instead — pass the contentlet
+via its `contentlet`/`options` inputs or a resolved model via `thumbnail`.
+This web component remains only for Stencil-internal use
+(`dot-card-contentlet`) and legacy JSP pages. See dotCMS/core#36295.
+
 ## Properties
 
 | Property             | Attribute              | Description | Type                | Default     |
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
index 2a8e2a1ae6b..8bf2d5b690c 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
@@ -15,19 +15,9 @@
         </div>
     } @else {
         <div class="dot-file-field-preview__thumbnail">
-            @if (fileInfo.source === 'temp') {
-                <dot-temp-file-thumbnail
-                    [tempFile]="fileInfo.file"
-                    [iconSize]="'48px'"
-                    data-testId="temp-file-thumbnail" />
-            } @else {
-                <dot-contentlet-thumbnail
-                    [fieldVariable]="fileInfo.fieldVariable"
-                    [iconSize]="'48px'"
-                    [contentlet]="fileInfo.file"
-                    [playableVideo]="true"
-                    data-testId="contentlet-thumbnail" />
-            }
+            <dot-content-thumbnail
+                [thumbnail]="fileInfo.thumbnail"
+                data-testId="contentlet-thumbnail" />
         </div>
         <div class="dot-file-field-preview__metadata">
             @if (metadata) {
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss
index 729933de667..ea2b6ed425e 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss
@@ -196,17 +196,6 @@
     text-decoration: none;
 }
 
-// Third-party web-component internals – cannot be styled with Tailwind
-:host {
-    dot-contentlet-thumbnail::ng-deep {
-        .thumbnail img,
-        .background-image:not(.svg-thumbnail) img {
-            object-fit: cover;
-        }
-    }
-}
-
-// Third-party web-component internals – cannot be styled with Tailwind
 .preview-container--fade .preview-code_container::after {
     content: "";
     background: linear-gradient(0deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.spec.ts
index b984fd55dc6..39933c5936b 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.spec.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.spec.ts
@@ -67,6 +67,15 @@ describe('DotFileFieldPreviewComponent', () => {
             expect(spectator.query(byTestId('download-btn'))).toBeTruthy();
         });
 
+        it('should render the unified thumbnail with the temp file pdf src', () => {
+            spectator.detectChanges();
+
+            expect(spectator.query(byTestId('contentlet-thumbnail'))).toBeTruthy();
+            expect(
+                spectator.query(byTestId('dot-content-thumbnail-image')).getAttribute('src')
+            ).toBe(TEMP_FILE_MOCK.thumbnailUrl);
+        });
+
         it('should call downloadAsset when click on the download btn', () => {
             const downloadSpy = jest
                 .spyOn(spectator.component, 'downloadAsset')
@@ -80,6 +89,17 @@ describe('DotFileFieldPreviewComponent', () => {
             expect(downloadSpy).toHaveBeenCalledWith(expectedUrl);
         });
 
+        it('should render with fallback metadata when the temp file has none (image editor save)', () => {
+            spectator.setInput('previewFile', {
+                source: 'temp',
+                file: { ...TEMP_FILE_MOCK, metadata: undefined }
+            } as unknown);
+            spectator.detectChanges();
+
+            expect(spectator.component).toBeTruthy();
+            expect(spectator.query(byTestId('metadata-title'))).toHaveText(TEMP_FILE_MOCK.fileName);
+        });
+
         it('should not show download button when referenceUrl is missing', () => {
             spectator.setInput('previewFile', {
                 source: 'temp',
@@ -109,9 +129,15 @@ describe('DotFileFieldPreviewComponent', () => {
             expect(spectator.component).toBeTruthy();
         });
 
-        it('should be have a dot-contentlet-thumbnail', () => {
+        it('should render the unified thumbnail with the contentlet image src', () => {
             spectator.detectChanges();
-            expect(spectator.query('dot-contentlet-thumbnail')).toBeTruthy();
+
+            const { inode, modDate } = NEW_FILE_MOCK.entity;
+
+            expect(spectator.query(byTestId('contentlet-thumbnail'))).toBeTruthy();
+            expect(
+                spectator.query(byTestId('dot-content-thumbnail-image')).getAttribute('src')
+            ).toBe(`/dA/${inode}/asset/500w/50q?r=${modDate}`);
         });
 
         it('should show proper metadata', () => {
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts
index 372d7cc7971..a3268aaa9b7 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.ts
@@ -1,7 +1,6 @@
 import { of } from 'rxjs';
 
 import {
-    CUSTOM_ELEMENTS_SCHEMA,
     ChangeDetectionStrategy,
     Component,
     computed,
@@ -27,10 +26,14 @@ import {
     DotFileMetadata
 } from '@dotcms/dotcms-models';
 import {
-    DotTempFileThumbnailComponent,
+    DotContentThumbnail,
+    DotContentThumbnailComponent,
     DotFileSizeFormatPipe,
     DotMessagePipe,
-    DotCopyButtonComponent
+    DotCopyButtonComponent,
+    buildFallbackTempFileMetadata,
+    contentletToThumbnailModel,
+    tempFileToThumbnailModel
 } from '@dotcms/ui';
 import { getFileMetadata } from '@dotcms/utils';
 
@@ -47,6 +50,8 @@ type FileInfo = UploadedFile & {
     downloadLink: string | null;
     content: string | null;
     metadata: DotFileMetadata;
+    /** Resolved model for the thumbnail viewer, built from either origin. */
+    thumbnail: DotContentThumbnail;
 };
 
 const buildTempDownloadLink = (referenceUrl: string): string => {
@@ -58,7 +63,7 @@ const buildTempDownloadLink = (referenceUrl: string): string => {
 @Component({
     selector: 'dot-file-field-preview',
     imports: [
-        DotTempFileThumbnailComponent,
+        DotContentThumbnailComponent,
         DotFileSizeFormatPipe,
         DotMessagePipe,
         ButtonModule,
@@ -70,8 +75,7 @@ const buildTempDownloadLink = (referenceUrl: string): string => {
     providers: [ConfirmationService],
     templateUrl: './dot-file-field-preview.component.html',
     styleUrls: ['./dot-file-field-preview.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotFileFieldPreviewComponent implements OnInit {
     readonly #dotResourceLinksService = inject(DotResourceLinksService);
@@ -149,7 +153,8 @@ export class DotFileFieldPreviewComponent implements OnInit {
                 contentType,
                 fieldVariable,
                 downloadLink: `/contentAsset/raw-data/${file.inode}/${fieldVariable}?byInode=true&force_download=true`,
-                metadata: getFileMetadata(file)
+                metadata: getFileMetadata(file),
+                thumbnail: contentletToThumbnailModel(file, { fieldVariable, playableVideo: true })
             };
         }
 
@@ -162,7 +167,9 @@ export class DotFileFieldPreviewComponent implements OnInit {
             contentType: DEFAULT_CONTENT_TYPE,
             fieldVariable: DEFAULT_CONTENT_TYPE,
             downloadLink: file.referenceUrl ? buildTempDownloadLink(file.referenceUrl) : null,
-            metadata: file.metadata
+            // Temp files fresh from the image editor may lack the metadata block
+            metadata: file.metadata ?? buildFallbackTempFileMetadata(file),
+            thumbnail: tempFileToThumbnailModel(file)
         };
     });
 
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html
index 0aada0e9730..c5687889023 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html
@@ -127,10 +127,8 @@
                                 @if (showThumbnail) {
                                     <div
                                         class="h-14 w-20 shrink-0 overflow-hidden rounded-md bg-gray-100">
-                                        <dot-contentlet-thumbnail
-                                            [iconSize]="'24px'"
+                                        <dot-content-thumbnail
                                             [contentlet]="item"
-                                            [playableVideo]="false"
                                             data-testId="contentlet-thumbnail" />
                                     </div>
                                 }
@@ -159,11 +157,11 @@
                     @case ('image') {
                         <td class="w-24 max-w-24 min-w-24" [class.cursor-not-allowed]="isDisabled">
                             <div class="flex items-center justify-center">
-                                <dot-contentlet-thumbnail
-                                    [iconSize]="'30px'"
-                                    [contentlet]="item"
-                                    [playableVideo]="false"
-                                    data-testId="contentlet-thumbnail" />
+                                <div class="h-14 w-20 shrink-0 overflow-hidden rounded-md">
+                                    <dot-content-thumbnail
+                                        [contentlet]="item"
+                                        data-testId="contentlet-thumbnail" />
+                                </div>
                             </div>
                         </td>
                     }
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.ts
index ed654b582ae..126e40e2353 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.ts
@@ -4,7 +4,6 @@ import {
     ChangeDetectionStrategy,
     Component,
     computed,
-    CUSTOM_ELEMENTS_SCHEMA,
     DestroyRef,
     forwardRef,
     inject,
@@ -25,7 +24,11 @@ import { filter } from 'rxjs/operators';
 
 import { DotMessageService } from '@dotcms/data-access';
 import { DotCMSContentlet, DotCMSContentTypeField, DotLanguage } from '@dotcms/dotcms-models';
-import { DotContentletStatusBadgeComponent, DotMessagePipe } from '@dotcms/ui';
+import {
+    DotContentletStatusBadgeComponent,
+    DotContentThumbnailComponent,
+    DotMessagePipe
+} from '@dotcms/ui';
 
 import { RelationshipFieldStore } from './../../store/relationship-field.store';
 import { FooterComponent } from './../dot-select-existing-content/components/footer/footer.component';
@@ -47,13 +50,13 @@ import { BaseControlValueAccessor } from '../../../shared/base-control-value-acc
         MenuModule,
         DotMessagePipe,
         DotContentletStatusBadgeComponent,
+        DotContentThumbnailComponent,
         LanguagePipe,
         PaginationComponent
     ],
     templateUrl: './dot-relationship-field.component.html',
     styleUrl: './dot-relationship-field.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush,
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     providers: [
         RelationshipFieldStore,
         {
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html
index 5b39737a27d..458d84ee5de 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html
@@ -145,10 +145,8 @@
                     <td colspan="2">
                         <div class="flex items-center gap-3">
                             <div class="h-14 w-20 shrink-0 overflow-hidden rounded-md bg-gray-100">
-                                <dot-contentlet-thumbnail
-                                    [iconSize]="'24px'"
+                                <dot-content-thumbnail
                                     [contentlet]="item"
-                                    [playableVideo]="false"
                                     data-testId="contentlet-thumbnail" />
                             </div>
                             <p class="truncate-text">{{ item.title }}</p>
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.ts
index 2311f6534b2..639354b88b6 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.ts
@@ -3,7 +3,6 @@ import {
     ChangeDetectionStrategy,
     Component,
     computed,
-    CUSTOM_ELEMENTS_SCHEMA,
     effect,
     inject,
     model,
@@ -27,7 +26,11 @@ import { ToggleSwitchModule } from 'primeng/toggleswitch';
 import { TooltipModule } from 'primeng/tooltip';
 
 import { DotCMSContentlet } from '@dotcms/dotcms-models';
-import { DotContentletStatusBadgeComponent, DotMessagePipe } from '@dotcms/ui';
+import {
+    DotContentletStatusBadgeComponent,
+    DotContentThumbnailComponent,
+    DotMessagePipe
+} from '@dotcms/ui';
 
 import { SearchComponent } from './components/search/search.component';
 import { ExistingContentStore } from './store/existing-content.store';
@@ -61,11 +64,11 @@ const STATIC_COLUMNS = 6;
         FormsModule,
         TooltipModule,
         SearchComponent,
-        ToggleSwitchModule
+        ToggleSwitchModule,
+        DotContentThumbnailComponent
     ],
     templateUrl: './dot-select-existing-content.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotSelectExistingContentComponent implements OnInit {
     /**
diff --git a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.html b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.html
index c7b2be68957..c159fae57fe 100644
--- a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.html
+++ b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.html
@@ -80,10 +80,9 @@
                         class="h-14 max-h-14 cursor-pointer bg-(--color-palette-primary-100) p-1"
                         (click)="onDoubleClick(item); $event.stopPropagation()">
                         @if (!isFolder) {
-                            <dot-contentlet-thumbnail
-                                [fieldVariable]="item?.contentType"
-                                [iconSize]="'36px'"
+                            <dot-content-thumbnail
                                 [contentlet]="item"
+                                [options]="{ fieldVariable: item?.contentType }"
                                 data-testId="contentlet-thumbnail"
                                 [attr.data-table-id]="item.identifier" />
                         } @else {
diff --git a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.spec.ts b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.spec.ts
index f552346f9a2..04912b22af9 100644
--- a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.spec.ts
+++ b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.spec.ts
@@ -468,8 +468,10 @@ describe('DotFolderListViewComponent', () => {
 
         it('should have a title column', () => {
             const titleColumn = spectator.query(byTestId('item-title'));
+            const titleText = spectator.query(byTestId('item-title-text'));
 
-            expect(titleColumn.textContent.trim()).toBe(firstItem.title);
+            expect(titleColumn).toBeTruthy();
+            expect(titleText.textContent.trim()).toBe(firstItem.title);
         });
 
         it('should have a status column', () => {
@@ -518,7 +520,7 @@ describe('DotFolderListViewComponent', () => {
         });
 
         it('should have a contentlet title', () => {
-            const contentletTitle = spectator.query(byTestId('item-title'));
+            const contentletTitle = spectator.query(byTestId('item-title-text'));
 
             expect(contentletTitle.textContent.trim()).toBe(firstItem.title);
         });
diff --git a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.ts b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.ts
index f768be69350..b855bf75c7f 100644
--- a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.ts
+++ b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.ts
@@ -5,7 +5,6 @@ import {
     ChangeDetectionStrategy,
     Component,
     computed,
-    CUSTOM_ELEMENTS_SCHEMA,
     effect,
     inject,
     input,
@@ -33,6 +32,7 @@ import {
 } from '@dotcms/dotcms-models';
 import {
     DotContentletStatusBadgeComponent,
+    DotContentThumbnailComponent,
     DotLocaleTagPipe,
     DotMessagePipe,
     DotRelativeDatePipe
@@ -46,6 +46,7 @@ import { DOT_DRAG_ITEM, HEADER_COLUMNS } from '../shared/constants';
         ButtonModule,
         TagModule,
         DotContentletStatusBadgeComponent,
+        DotContentThumbnailComponent,
         DotMessagePipe,
         DotRelativeDatePipe,
         SkeletonModule,
@@ -53,7 +54,6 @@ import { DOT_DRAG_ITEM, HEADER_COLUMNS } from '../shared/constants';
         DotLocaleTagPipe,
         NgTemplateOutlet
     ],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     templateUrl: './dot-folder-list-view.component.html',
     styleUrls: ['./dot-folder-list-view.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.html b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.html
index 56be23236c2..032a9fb385b 100644
--- a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.html
+++ b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.html
@@ -5,16 +5,13 @@
     class="flex h-full w-20 shrink-0 items-center justify-center overflow-hidden"
     [class]="
         $isIconThumbnail()
-            ? 'bg-gray-100 group-hover:bg-(--color-palette-primary-200) group-hover:[--gray-700:var(--color-palette-primary-600)]'
+            ? 'bg-gray-100 group-hover:bg-(--color-palette-primary-200) group-hover:[--dot-content-thumbnail-icon-color:var(--color-palette-primary-600)]'
             : ''
     ">
-    <!-- group-hover:[--gray-700:...] overrides the CSS variable used internally by
-         dot-contentlet-thumbnail > dot-contentlet-icon (shadow DOM) for icon color -->
-    <dot-contentlet-thumbnail
+    <dot-content-thumbnail
         data-testid="contentlet-thumbnail"
-        class="pointer-events-none size-full *:size-full [&_img]:size-full [&_img]:object-cover"
-        [contentlet]="contentlet"
-        [iconSize]="'32px'" />
+        class="pointer-events-none"
+        [thumbnail]="$thumbnail()" />
 </div>
 
 <!-- Title -->
diff --git a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.spec.ts b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.spec.ts
index afd73b4167a..f71f981f47e 100644
--- a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.spec.ts
+++ b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.spec.ts
@@ -115,17 +115,14 @@ describe('DotUvePaletteContentletComponent', () => {
     });
 
     describe('Template Rendering', () => {
-        it('should render dot-contentlet-thumbnail with correct properties', () => {
-            const thumbnail = spectator.query(
-                '[data-testid="contentlet-thumbnail"]'
-            ) as HTMLElement & {
-                iconSize: string;
-                contentlet: DotCMSContentlet;
-            };
+        it('should render dot-content-thumbnail with the resolved model', () => {
+            const thumbnail = spectator.query('[data-testid="contentlet-thumbnail"]');
 
             expect(thumbnail).toBeTruthy();
-            expect(thumbnail.contentlet).toBeDefined();
-            expect(thumbnail.contentlet.identifier).toBe('test-identifier');
+            expect(thumbnail.tagName.toLowerCase()).toBe('dot-content-thumbnail');
+            expect(spectator.component.$thumbnail()).toEqual(
+                expect.objectContaining({ type: expect.any(String), icon: expect.any(String) })
+            );
         });
 
         it('should render contentlet title', () => {
diff --git a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.ts b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.ts
index bccca225b2d..321eb76f413 100644
--- a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.ts
+++ b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.ts
@@ -1,19 +1,13 @@
-import {
-    ChangeDetectionStrategy,
-    Component,
-    computed,
-    CUSTOM_ELEMENTS_SCHEMA,
-    input
-} from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 import { TooltipModule } from 'primeng/tooltip';
 
 import { DotCMSContentlet } from '@dotcms/dotcms-models';
+import { contentletToThumbnailModel, DotContentThumbnailComponent } from '@dotcms/ui';
 
 @Component({
     selector: 'dot-uve-palette-contentlet',
-    imports: [TooltipModule],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
+    imports: [TooltipModule, DotContentThumbnailComponent],
     templateUrl: './dot-uve-palette-contentlet.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: {
@@ -26,17 +20,9 @@ import { DotCMSContentlet } from '@dotcms/dotcms-models';
 export class DotUvePaletteContentletComponent {
     $contentlet = input.required<DotCMSContentlet>({ alias: 'contentlet' });
 
-    readonly $isIconThumbnail = computed(() => {
-        const c = this.$contentlet();
-        const mime = c?.mimeType ?? '';
-        const renderImage =
-            !!c?.['hasTitleImage'] ||
-            mime === 'application/pdf' ||
-            !!c?.['image'] ||
-            mime.includes('video');
+    readonly $thumbnail = computed(() => contentletToThumbnailModel(this.$contentlet()));
 
-        return !renderImage;
-    });
+    readonly $isIconThumbnail = computed(() => this.$thumbnail().type === 'icon');
 
     readonly $hostClass =
         'group flex w-full items-center overflow-hidden cursor-grab active:cursor-grabbing ' +
diff --git a/core-web/libs/ui/src/index.ts b/core-web/libs/ui/src/index.ts
index eac4c9e173b..7523c979218 100644
--- a/core-web/libs/ui/src/index.ts
+++ b/core-web/libs/ui/src/index.ts
@@ -28,7 +28,9 @@ export * from './lib/components/dot-pages-favorite-page-empty-skeleton/dot-pages
 export * from './lib/components/dot-severity-icon/dot-severity-icon.component';
 export * from './lib/components/dot-sidebar-accordion';
 export * from './lib/components/dot-sidebar-header/dot-sidebar-header.component';
-export * from './lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component';
+export * from './lib/components/dot-content-thumbnail/dot-content-thumbnail.component';
+export * from './lib/components/dot-content-thumbnail/models/dot-content-thumbnail.model';
+export * from './lib/components/dot-content-thumbnail/utils/dot-content-thumbnail.utils';
 export * from './lib/components/dot-content-type/dot-content-type.component';
 export { DotSiteComponent } from './lib/components/dot-site/dot-site.component';
 export * from './lib/components/dot-theme/dot-theme.component';
diff --git a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.html b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.html
index 2db93714ecf..cfb98bd2a00 100644
--- a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.html
+++ b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.html
@@ -1,10 +1,8 @@
 <p-card>
     <ng-template #header>
         <div class="thumbnail-container">
-            <dot-contentlet-thumbnail
+            <dot-content-thumbnail
                 [contentlet]="contentlet"
-                [iconSize]="'72px'"
-                [showVideoThumbnail]="true"
                 data-testId="dot-contentlet-thumbnail" />
         </div>
     </ng-template>
diff --git a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.scss b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.scss
index cdb08f07cd6..3957e98280b 100644
--- a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.scss
+++ b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.scss
@@ -34,15 +34,10 @@
                 height: 100%;
                 background: colors.$color-palette-gray-200;
 
-                dot-contentlet-thumbnail {
-                    width: 100%;
-                    height: 100%;
-
-                    img {
-                        object-fit: contain;
-                        width: 100%;
-                        height: 100%;
-                    }
+                // Card look: whole asset visible inside the padded box, never cropped
+                dot-content-thumbnail img,
+                dot-content-thumbnail video {
+                    object-fit: contain;
                 }
             }
         }
diff --git a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.spec.ts b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.spec.ts
index 0c608053c70..59ef2cac32a 100644
--- a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.spec.ts
+++ b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.spec.ts
@@ -32,10 +32,10 @@ describe('DotAssetCardComponent', () => {
         });
     });
 
-    it('should use the dot-contentlet-thumbnail', () => {
+    it('should use the dot-content-thumbnail', () => {
         const card = spectator.query(Card);
-        const thumbnail = spectator.query('dot-contentlet-thumbnail');
-        expect(thumbnail).toBeDefined();
+        const thumbnail = spectator.query('dot-content-thumbnail');
+        expect(thumbnail).toBeTruthy();
         expect(card).toBeDefined();
     });
 
diff --git a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.ts b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.ts
index 727b1fd76ff..445b46f8bca 100644
--- a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.ts
+++ b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.ts
@@ -1,19 +1,19 @@
-import { CUSTOM_ELEMENTS_SCHEMA, ChangeDetectionStrategy, Component, Input } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 import { Card } from 'primeng/card';
 import { Tag } from 'primeng/tag';
 
 import { DotCMSContentlet } from '@dotcms/dotcms-models';
 
+import { DotContentThumbnailComponent } from '../../../dot-content-thumbnail/dot-content-thumbnail.component';
 import { DotContentletStatusBadgeComponent } from '../../../dot-contentlet-status-badge/dot-contentlet-status-badge.component';
 
 @Component({
     selector: 'dot-asset-card',
     templateUrl: './dot-asset-card.component.html',
     styleUrls: ['./dot-asset-card.component.scss'],
-    imports: [Card, Tag, DotContentletStatusBadgeComponent],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    imports: [Card, Tag, DotContentletStatusBadgeComponent, DotContentThumbnailComponent],
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotAssetCardComponent {
     @Input() contentlet: DotCMSContentlet;
diff --git a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.html b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.html
index 244a172b698..8e5cbc5061f 100644
--- a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.html
+++ b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.html
@@ -26,7 +26,7 @@
         </tr>
     </ng-template>
     <ng-template pTemplate="caption">
-        <div class="w-full flex justify-between">
+        <div class="flex w-full justify-between">
             <p-iconField iconPosition="left">
                 <p-inputIcon styleClass="pi pi-search" />
                 <input
@@ -78,10 +78,8 @@
         <tr class="h-12" [pSelectableRow]="content">
             <td class="max-w-8">
                 <div class="dataview-thumbnail">
-                    <dot-contentlet-thumbnail
-                        [iconSize]="'48px'"
+                    <dot-content-thumbnail
                         [contentlet]="content"
-                        [playableVideo]="false"
                         data-testId="contentlet-thumbnail" />
                 </div>
             </td>
diff --git a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.scss b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.scss
index a68fafafe0f..e02cd955d5c 100644
--- a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.scss
+++ b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.scss
@@ -22,7 +22,8 @@
 
 .dataview-thumbnail {
     width: 100%;
-    max-height: 3rem;
+    // Definite height: dot-content-thumbnail sizes itself from its container
+    height: 3rem;
     overflow: hidden;
     position: relative;
 }
diff --git a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.ts b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.ts
index 19064a7fc48..56f98d158ce 100644
--- a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.ts
+++ b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.ts
@@ -2,7 +2,6 @@ import { DatePipe } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
-    CUSTOM_ELEMENTS_SCHEMA,
     ElementRef,
     input,
     model,
@@ -22,6 +21,7 @@ import { TableModule } from 'primeng/table';
 import { DotCMSContentlet } from '@dotcms/dotcms-models';
 
 import { DotMessagePipe } from '../../../../dot-message/dot-message.pipe';
+import { DotContentThumbnailComponent } from '../../../dot-content-thumbnail/dot-content-thumbnail.component';
 
 @Component({
     selector: 'dot-dataview',
@@ -34,12 +34,12 @@ import { DotMessagePipe } from '../../../../dot-message/dot-message.pipe';
         MessageModule,
         SkeletonModule,
         DatePipe,
-        DotMessagePipe
+        DotMessagePipe,
+        DotContentThumbnailComponent
     ],
     templateUrl: './dot-dataview.component.html',
     styleUrls: ['./dot-dataview.component.scss'],
-    changeDetection: ChangeDetectionStrategy.OnPush,
-    schemas: [CUSTOM_ELEMENTS_SCHEMA]
+    changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotDataViewComponent {
     /**
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts
new file mode 100644
index 00000000000..404d2db2b69
--- /dev/null
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts
@@ -0,0 +1,30 @@
+import { ChangeDetectionStrategy, Component, input } from '@angular/core';
+
+/**
+ * Internal renderer for the icon fallback. Renders a Material Symbols glyph
+ * whose size auto-scales with the thumbnail container (cqmin units — the
+ * viewer host declares `container-type: size`) unless an explicit `size`
+ * override is provided. Color is themeable from the outside via the
+ * `--dot-content-thumbnail-icon-color` CSS custom property.
+ */
+@Component({
+    selector: 'dot-content-thumbnail-icon',
+    template: `
+        <i
+            [style.font-size]="$size()"
+            [attr.aria-label]="$alt()"
+            class="material-symbols-outlined text-[clamp(16px,55cqmin,72px)] leading-none text-(--dot-content-thumbnail-icon-color,var(--gray-700)) select-none"
+            role="img"
+            data-testId="dot-content-thumbnail-icon">
+            {{ $icon() }}
+        </i>
+    `,
+    host: { class: 'flex h-full w-full items-center justify-center' },
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotContentThumbnailIconComponent {
+    $icon = input.required<string>({ alias: 'icon' });
+    $alt = input<string>('', { alias: 'alt' });
+    /** Explicit font-size override (e.g. '48px'); when unset the glyph auto-scales via container queries. */
+    $size = input<string | undefined>(undefined, { alias: 'size' });
+}
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-image.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-image.component.ts
new file mode 100644
index 00000000000..e434871205c
--- /dev/null
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-image.component.ts
@@ -0,0 +1,33 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+
+/**
+ * Internal renderer for raster/vector image thumbnails (`image`, `pdf`, `svg`
+ * types). Purely presentational — visibility during load is orchestrated by
+ * the viewer, which hides this renderer until it emits `loaded`. Kept private
+ * to the `dot-content-thumbnail` folder — consumers use the viewer.
+ */
+@Component({
+    selector: 'dot-content-thumbnail-image',
+    template: `
+        <img
+            (load)="loaded.emit()"
+            (error)="failed.emit()"
+            [src]="$src()"
+            [alt]="$alt()"
+            [title]="$alt()"
+            [class.object-cover]="$fit() === 'cover'"
+            [class.object-contain]="$fit() === 'contain'"
+            class="size-full"
+            data-testId="dot-content-thumbnail-image" />
+    `,
+    host: { class: 'block h-full w-full' },
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotContentThumbnailImageComponent {
+    $src = input.required<string>({ alias: 'src' });
+    $alt = input<string>('', { alias: 'alt' });
+    $fit = input<'cover' | 'contain'>('cover', { alias: 'fit' });
+
+    loaded = output<void>();
+    failed = output<void>();
+}
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-video.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-video.component.ts
new file mode 100644
index 00000000000..aaf986a1be8
--- /dev/null
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-video.component.ts
@@ -0,0 +1,48 @@
+import { ChangeDetectionStrategy, Component, input, output } from '@angular/core';
+
+/**
+ * Internal renderer for video thumbnails. Playable videos render with native
+ * controls; non-playable ones show a static first frame — the `src` carries a
+ * `#t=0.1` media fragment (set by the mapper) so the browser seeks and paints
+ * that frame without playback (replaces the legacy Stencil canvas approach).
+ */
+@Component({
+    selector: 'dot-content-thumbnail-video',
+    template: `
+        @if ($playable()) {
+            <!-- loadedmetadata (not loadeddata): the element is visible from the start,
+                 so 'loaded' only needs to mean "the media resolved", not "frame painted" -->
+            <video
+                (loadedmetadata)="loaded.emit()"
+                (error)="failed.emit()"
+                [src]="$src()"
+                [attr.aria-label]="$alt()"
+                class="size-full"
+                controls
+                data-testId="dot-content-thumbnail-video"></video>
+        } @else {
+            <video
+                (loadeddata)="loaded.emit()"
+                (error)="failed.emit()"
+                [src]="$src()"
+                [attr.aria-label]="$alt()"
+                class="pointer-events-none size-full object-cover"
+                preload="metadata"
+                muted
+                playsinline
+                disablepictureinpicture
+                tabindex="-1"
+                data-testId="dot-content-thumbnail-video-frame"></video>
+        }
+    `,
+    host: { class: 'block h-full w-full' },
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotContentThumbnailVideoComponent {
+    $src = input.required<string>({ alias: 'src' });
+    $alt = input<string>('', { alias: 'alt' });
+    $playable = input<boolean>(false, { alias: 'playable' });
+
+    loaded = output<void>();
+    failed = output<void>();
+}
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.spec.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.spec.ts
new file mode 100644
index 00000000000..6b3b6eaf144
--- /dev/null
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.spec.ts
@@ -0,0 +1,319 @@
+import { Spectator, byTestId, createComponentFactory } from '@ngneat/spectator/jest';
+
+import { DotCMSContentlet } from '@dotcms/dotcms-models';
+
+import { DotContentThumbnailComponent } from './dot-content-thumbnail.component';
+import { DotContentThumbnail } from './models/dot-content-thumbnail.model';
+
+const IMAGE_THUMBNAIL: DotContentThumbnail = {
+    type: 'image',
+    src: '/dA/inode-123/asset/500w/50q?r=99',
+    icon: 'image',
+    alt: 'photo.jpg'
+};
+
+const SVG_THUMBNAIL: DotContentThumbnail = {
+    type: 'svg',
+    src: '/contentAsset/image/inode-123/asset',
+    icon: 'image',
+    alt: 'logo.svg'
+};
+
+const PDF_THUMBNAIL: DotContentThumbnail = {
+    type: 'pdf',
+    src: '/contentAsset/image/inode-123/asset/pdf_page/1/resize_w/250/quality_q/45',
+    icon: 'insert_drive_file',
+    alt: 'doc.pdf'
+};
+
+const PLAYABLE_VIDEO_THUMBNAIL: DotContentThumbnail = {
+    type: 'video',
+    src: '/dA/inode-123/asset',
+    icon: 'videocam',
+    alt: 'clip.mp4',
+    playable: true
+};
+
+const FRAME_VIDEO_THUMBNAIL: DotContentThumbnail = {
+    type: 'video',
+    src: '/dA/inode-123#t=0.1',
+    icon: 'videocam',
+    alt: 'clip.mp4',
+    playable: false
+};
+
+const ICON_THUMBNAIL: DotContentThumbnail = {
+    type: 'icon',
+    src: '',
+    icon: 'audiotrack',
+    alt: 'song.mp3'
+};
+
+describe('DotContentThumbnailComponent', () => {
+    let spectator: Spectator<DotContentThumbnailComponent>;
+
+    const createComponent = createComponentFactory({
+        component: DotContentThumbnailComponent
+    });
+
+    const create = (thumbnail: DotContentThumbnail, props: Record<string, unknown> = {}) => {
+        spectator = createComponent({ props: { thumbnail, ...props } });
+    };
+
+    describe('contentlet input', () => {
+        const contentlet = {
+            inode: 'inode-123',
+            title: 'A file',
+            modDate: '99',
+            baseType: 'DOTASSET',
+            contentType: 'dotAsset',
+            hasTitleImage: true
+        } as unknown as DotCMSContentlet;
+
+        it('resolves the thumbnail model from a contentlet', () => {
+            spectator = createComponent({ props: { contentlet } });
+
+            const img = spectator.query<HTMLImageElement>(byTestId('dot-content-thumbnail-image'));
+
+            expect(img.getAttribute('src')).toBe('/dA/inode-123/500w/50q?r=99');
+        });
+
+        it('applies the mapping options', () => {
+            spectator = createComponent({
+                props: {
+                    contentlet: { ...contentlet, mimeType: 'video/mp4' } as DotCMSContentlet,
+                    options: { playableVideo: true, fieldVariable: 'asset' }
+                }
+            });
+
+            const video = spectator.query<HTMLVideoElement>(
+                byTestId('dot-content-thumbnail-video')
+            );
+
+            expect(video.getAttribute('src')).toBe('/dA/inode-123/asset');
+        });
+
+        it('prefers an explicit thumbnail model over the contentlet', () => {
+            spectator = createComponent({ props: { contentlet, thumbnail: ICON_THUMBNAIL } });
+
+            expect(spectator.query(byTestId('dot-content-thumbnail-icon'))).toBeTruthy();
+        });
+
+        it('renders the default icon when neither input is provided', () => {
+            spectator = createComponent();
+
+            const icon = spectator.query(byTestId('dot-content-thumbnail-icon'));
+
+            expect(icon.textContent.trim()).toBe('insert_drive_file');
+        });
+    });
+
+    describe('rendering by type', () => {
+        it('renders an image with object-cover for type image', () => {
+            create(IMAGE_THUMBNAIL);
+
+            const img = spectator.query<HTMLImageElement>(byTestId('dot-content-thumbnail-image'));
+
+            expect(img).toBeTruthy();
+            expect(img.getAttribute('src')).toBe(IMAGE_THUMBNAIL.src);
+            expect(img.getAttribute('alt')).toBe(IMAGE_THUMBNAIL.alt);
+            expect(img.classList).toContain('object-cover');
+        });
+
+        it('renders an image with object-contain for type svg', () => {
+            create(SVG_THUMBNAIL);
+
+            const img = spectator.query<HTMLImageElement>(byTestId('dot-content-thumbnail-image'));
+
+            expect(img.getAttribute('src')).toBe(SVG_THUMBNAIL.src);
+            expect(img.classList).toContain('object-contain');
+            expect(img.classList).not.toContain('object-cover');
+        });
+
+        it('renders an image with object-cover for type pdf', () => {
+            create(PDF_THUMBNAIL);
+
+            const img = spectator.query<HTMLImageElement>(byTestId('dot-content-thumbnail-image'));
+
+            expect(img.getAttribute('src')).toBe(PDF_THUMBNAIL.src);
+            expect(img.classList).toContain('object-cover');
+        });
+
+        it('renders a video with controls when playable', () => {
+            create(PLAYABLE_VIDEO_THUMBNAIL);
+
+            const video = spectator.query<HTMLVideoElement>(
+                byTestId('dot-content-thumbnail-video')
+            );
+
+            expect(video).toBeTruthy();
+            expect(video.getAttribute('src')).toBe(PLAYABLE_VIDEO_THUMBNAIL.src);
+            expect(video.hasAttribute('controls')).toBe(true);
+        });
+
+        it('renders a muted first-frame video without controls when not playable', () => {
+            create(FRAME_VIDEO_THUMBNAIL);
+
+            const video = spectator.query<HTMLVideoElement>(
+                byTestId('dot-content-thumbnail-video-frame')
+            );
+
+            expect(video).toBeTruthy();
+            expect(video.getAttribute('src')).toBe(FRAME_VIDEO_THUMBNAIL.src);
+            expect(video.hasAttribute('controls')).toBe(false);
+            expect(video.getAttribute('preload')).toBe('metadata');
+        });
+
+        it('renders the material icon glyph for type icon', () => {
+            create(ICON_THUMBNAIL);
+
+            const icon = spectator.query(byTestId('dot-content-thumbnail-icon'));
+
+            expect(icon).toBeTruthy();
+            expect(icon.textContent.trim()).toBe('audiotrack');
+            expect(icon.classList).toContain('material-symbols-outlined');
+        });
+
+        it('falls back to insert_drive_file when the icon model has no glyph', () => {
+            create({ ...ICON_THUMBNAIL, icon: '' });
+
+            const icon = spectator.query(byTestId('dot-content-thumbnail-icon'));
+
+            expect(icon.textContent.trim()).toBe('insert_drive_file');
+        });
+    });
+
+    describe('icon sizing', () => {
+        it('auto-scales by default (no inline font-size)', () => {
+            create(ICON_THUMBNAIL);
+
+            const icon = spectator.query<HTMLElement>(byTestId('dot-content-thumbnail-icon'));
+
+            expect(icon.style.fontSize).toBe('');
+        });
+
+        it('applies the explicit iconSize override', () => {
+            create(ICON_THUMBNAIL, { iconSize: '48px' });
+
+            const icon = spectator.query<HTMLElement>(byTestId('dot-content-thumbnail-icon'));
+
+            expect(icon.style.fontSize).toBe('48px');
+        });
+    });
+
+    describe('state machine', () => {
+        it('starts as loading for media types (pulse visible, media hidden)', () => {
+            create(IMAGE_THUMBNAIL);
+
+            const loading = spectator.query(byTestId('dot-content-thumbnail-loading'));
+
+            expect(loading).toBeTruthy();
+            expect(loading.classList).not.toContain('opacity-0');
+            expect(spectator.query('dot-content-thumbnail-image').classList).toContain('opacity-0');
+        });
+
+        it('starts as loaded for icon type (no pulse)', () => {
+            create(ICON_THUMBNAIL);
+
+            expect(spectator.query(byTestId('dot-content-thumbnail-loading'))).toBeFalsy();
+        });
+
+        it('fades out the pulse and reveals the media on load', () => {
+            create(IMAGE_THUMBNAIL);
+
+            spectator.dispatchFakeEvent(byTestId('dot-content-thumbnail-image'), 'load');
+            spectator.detectChanges();
+
+            expect(spectator.query(byTestId('dot-content-thumbnail-loading')).classList).toContain(
+                'opacity-0'
+            );
+            expect(spectator.query('dot-content-thumbnail-image').classList).not.toContain(
+                'opacity-0'
+            );
+        });
+
+        it('falls back to the icon renderer on media error', () => {
+            create(IMAGE_THUMBNAIL);
+
+            spectator.dispatchFakeEvent(byTestId('dot-content-thumbnail-image'), 'error');
+            spectator.detectChanges();
+
+            const icon = spectator.query(byTestId('dot-content-thumbnail-icon'));
+
+            expect(spectator.query(byTestId('dot-content-thumbnail-image'))).toBeFalsy();
+            expect(icon).toBeTruthy();
+            expect(icon.textContent.trim()).toBe(IMAGE_THUMBNAIL.icon);
+            expect(spectator.query(byTestId('dot-content-thumbnail-loading'))).toBeFalsy();
+        });
+
+        it('falls back to the icon renderer when the video errors', () => {
+            create(PLAYABLE_VIDEO_THUMBNAIL);
+
+            spectator.dispatchFakeEvent(byTestId('dot-content-thumbnail-video'), 'error');
+            spectator.detectChanges();
+
+            expect(spectator.query(byTestId('dot-content-thumbnail-icon'))).toBeTruthy();
+        });
+
+        it('never masks playable videos (no skeleton, video visible while loading)', () => {
+            create(PLAYABLE_VIDEO_THUMBNAIL);
+
+            expect(spectator.query(byTestId('dot-content-thumbnail-loading'))).toBeFalsy();
+            expect(spectator.query('dot-content-thumbnail-video').classList).not.toContain(
+                'opacity-0'
+            );
+        });
+
+        it('keeps the skeleton for non-playable first-frame videos until loadeddata', () => {
+            create(FRAME_VIDEO_THUMBNAIL);
+
+            const loading = spectator.query(byTestId('dot-content-thumbnail-loading'));
+
+            expect(loading).toBeTruthy();
+            expect(loading.classList).not.toContain('opacity-0');
+            expect(spectator.query('dot-content-thumbnail-video').classList).toContain('opacity-0');
+
+            spectator.dispatchFakeEvent(
+                byTestId('dot-content-thumbnail-video-frame'),
+                'loadeddata'
+            );
+            spectator.detectChanges();
+
+            expect(spectator.query(byTestId('dot-content-thumbnail-loading')).classList).toContain(
+                'opacity-0'
+            );
+            expect(spectator.query('dot-content-thumbnail-video').classList).not.toContain(
+                'opacity-0'
+            );
+        });
+
+        it('emits stateChange transitions', () => {
+            spectator = createComponent({
+                props: { thumbnail: IMAGE_THUMBNAIL },
+                detectChanges: false
+            });
+
+            const states: string[] = [];
+            spectator.output('stateChange').subscribe((state) => states.push(state as string));
+            spectator.detectChanges();
+
+            spectator.dispatchFakeEvent(byTestId('dot-content-thumbnail-image'), 'load');
+            spectator.detectChanges();
+
+            expect(states).toEqual(['loading', 'loaded']);
+        });
+
+        it('resets to the model type and loading state when the thumbnail input changes', () => {
+            create(IMAGE_THUMBNAIL);
+
+            spectator.dispatchFakeEvent(byTestId('dot-content-thumbnail-image'), 'error');
+            spectator.detectChanges();
+            expect(spectator.query(byTestId('dot-content-thumbnail-icon'))).toBeTruthy();
+
+            spectator.setInput('thumbnail', { ...IMAGE_THUMBNAIL, src: '/dA/other/500w' });
+
+            expect(spectator.query(byTestId('dot-content-thumbnail-image'))).toBeTruthy();
+            expect(spectator.query(byTestId('dot-content-thumbnail-loading'))).toBeTruthy();
+        });
+    });
+});
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts
new file mode 100644
index 00000000000..68c746a63ee
--- /dev/null
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts
@@ -0,0 +1,189 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    effect,
+    input,
+    linkedSignal,
+    output
+} from '@angular/core';
+
+import { DotCMSContentlet } from '@dotcms/dotcms-models';
+
+import { DotContentThumbnailIconComponent } from './components/dot-content-thumbnail-icon.component';
+import { DotContentThumbnailImageComponent } from './components/dot-content-thumbnail-image.component';
+import { DotContentThumbnailVideoComponent } from './components/dot-content-thumbnail-video.component';
+import {
+    DotContentThumbnail,
+    DotContentThumbnailState,
+    DotContentThumbnailType,
+    DotContentletThumbnailOptions
+} from './models/dot-content-thumbnail.model';
+import { contentletToThumbnailModel } from './utils/dot-content-thumbnail.utils';
+
+const EMPTY_THUMBNAIL: DotContentThumbnail = {
+    type: 'icon',
+    src: '',
+    icon: 'insert_drive_file',
+    alt: ''
+};
+
+/**
+ * Presentational thumbnail viewer for dotCMS content (saved contentlets and
+ * temp files). Renders per-type (image/svg/pdf/video/icon) through internal
+ * renderers, with a loading pulse and an icon fallback on media error.
+ *
+ * Two ways to feed it — pass exactly one:
+ *
+ * ```html
+ * <!-- Common case: hand it the contentlet, it resolves the model itself -->
+ * <dot-content-thumbnail [contentlet]="item" />
+ * <dot-content-thumbnail [contentlet]="item" [options]="{ fieldVariable: 'asset' }" />
+ *
+ * <!-- Advanced: pass an already-resolved model (e.g. temp files) -->
+ * <dot-content-thumbnail [thumbnail]="model" />
+ * ```
+ *
+ * Fills its parent container (`h-full w-full`); media renders `object-cover`
+ * (`object-contain` for SVG). The icon glyph auto-scales with the container
+ * (override with `iconSize`) and can be recolored via the
+ * `--dot-content-thumbnail-icon-color` CSS custom property.
+ *
+ * Replaces the deprecated Stencil `dot-contentlet-thumbnail` web component
+ * and the former `dot-temp-file-thumbnail`.
+ */
+@Component({
+    selector: 'dot-content-thumbnail',
+    imports: [
+        DotContentThumbnailImageComponent,
+        DotContentThumbnailVideoComponent,
+        DotContentThumbnailIconComponent
+    ],
+    template: `
+        @let model = $model();
+        @switch ($type()) {
+            @case ('video') {
+                <!-- Playable videos are never masked: the native element brings its own
+                     controls and loading UX, and media loads can be slow/queued -->
+                <dot-content-thumbnail-video
+                    (loaded)="onLoaded()"
+                    (failed)="onFailed()"
+                    [src]="model.src"
+                    [alt]="model.alt"
+                    [playable]="model.playable ?? false"
+                    [class.opacity-0]="$state() === 'loading' && !model.playable"
+                    class="transition-opacity duration-300" />
+            }
+            @case ('icon') {
+                <dot-content-thumbnail-icon
+                    [icon]="model.icon || 'insert_drive_file'"
+                    [alt]="model.alt"
+                    [size]="$iconSize()" />
+            }
+            @default {
+                <dot-content-thumbnail-image
+                    (loaded)="onLoaded()"
+                    (failed)="onFailed()"
+                    [src]="model.src"
+                    [alt]="model.alt"
+                    [fit]="$type() === 'svg' ? 'contain' : 'cover'"
+                    [class.opacity-0]="$state() === 'loading'"
+                    class="transition-opacity duration-300" />
+            }
+        }
+
+        @if ($hasLoadingOverlay()) {
+            <div
+                class="dot-content-thumbnail__loading pointer-events-none absolute inset-0 overflow-hidden bg-gray-200 transition-opacity duration-300"
+                [class.opacity-0]="$state() !== 'loading'"
+                data-testId="dot-content-thumbnail-loading"></div>
+        }
+    `,
+    host: {
+        class: 'relative flex h-full w-full items-center justify-center overflow-hidden [container-type:size]'
+    },
+    styles: `
+        /* Sliding-highlight shimmer, exact replica of PrimeNG p-skeleton (needs
+           keyframes, not expressible in Tailwind utilities). Uses the PrimeNG
+           token when the theme provides it, with the Lara default as fallback. */
+        .dot-content-thumbnail__loading::after {
+            content: '';
+            position: absolute;
+            inset: 0;
+            transform: translateX(-100%);
+            background: linear-gradient(
+                90deg,
+                rgba(255, 255, 255, 0),
+                var(--p-skeleton-animation-background, rgba(255, 255, 255, 0.4)),
+                rgba(255, 255, 255, 0)
+            );
+            animation: dot-content-thumbnail-shimmer 1.2s infinite;
+        }
+
+        /* Stop compositing work once the overlay has faded out */
+        .dot-content-thumbnail__loading.opacity-0::after {
+            animation: none;
+        }
+
+        @keyframes dot-content-thumbnail-shimmer {
+            to {
+                transform: translateX(100%);
+            }
+        }
+    `,
+    changeDetection: ChangeDetectionStrategy.OnPush
+})
+export class DotContentThumbnailComponent {
+    /** Contentlet to preview; the component resolves the thumbnail model itself. */
+    $contentlet = input<DotCMSContentlet | undefined>(undefined, { alias: 'contentlet' });
+    /** Mapping options used with `contentlet` (fieldVariable, playableVideo…). */
+    $options = input<DotContentletThumbnailOptions | undefined>(undefined, { alias: 'options' });
+    /** Already-resolved model; takes precedence over `contentlet`. */
+    $thumbnail = input<DotContentThumbnail | undefined>(undefined, { alias: 'thumbnail' });
+    /** Explicit icon font-size override; when unset the glyph auto-scales with the container. */
+    $iconSize = input<string | undefined>(undefined, { alias: 'iconSize' });
+
+    stateChange = output<DotContentThumbnailState>();
+
+    protected readonly $model = computed<DotContentThumbnail>(() => {
+        const thumbnail = this.$thumbnail();
+
+        if (thumbnail) {
+            return thumbnail;
+        }
+
+        const contentlet = this.$contentlet();
+
+        return contentlet
+            ? contentletToThumbnailModel(contentlet, this.$options())
+            : EMPTY_THUMBNAIL;
+    });
+
+    /** Effective render type; falls back to 'icon' on media error, resets when the model changes. */
+    protected readonly $type = linkedSignal<DotContentThumbnailType>(() => this.$model().type);
+
+    /** Skeleton applies to async media that stays hidden until it paints — not icons nor playable videos. */
+    protected readonly $hasLoadingOverlay = computed(() => {
+        const type = this.$type();
+
+        return type !== 'icon' && !(type === 'video' && this.$model().playable);
+    });
+
+    /** Icon has no async load, so it starts (and resets) as 'loaded'. */
+    protected readonly $state = linkedSignal<DotContentThumbnailState>(() =>
+        this.$model().type === 'icon' ? 'loaded' : 'loading'
+    );
+
+    constructor() {
+        effect(() => this.stateChange.emit(this.$state()));
+    }
+
+    protected onLoaded(): void {
+        this.$state.set('loaded');
+    }
+
+    protected onFailed(): void {
+        this.$state.set('error');
+        this.$type.set('icon');
+    }
+}
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/models/dot-content-thumbnail.model.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/models/dot-content-thumbnail.model.ts
new file mode 100644
index 00000000000..5e6dba50f1c
--- /dev/null
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/models/dot-content-thumbnail.model.ts
@@ -0,0 +1,49 @@
+/**
+ * Media type resolved for a thumbnail. `pdf` and `image` render the same way
+ * (an `<img>` of a server-rendered raster) but are kept distinct so consumers
+ * and tests stay expressive; `svg` renders with `object-contain` so vector
+ * images are never cropped or distorted.
+ */
+export type DotContentThumbnailType = 'image' | 'svg' | 'pdf' | 'video' | 'icon';
+
+/**
+ * Loading lifecycle of the thumbnail media. `icon` thumbnails have no async
+ * load and start as `loaded`. On `error` the viewer falls back to the icon
+ * renderer.
+ */
+export type DotContentThumbnailState = 'loading' | 'loaded' | 'error';
+
+/**
+ * Resolved, render-ready thumbnail model consumed by `dot-content-thumbnail`.
+ * Build it with `contentletToThumbnailModel` / `tempFileToThumbnailModel`, or
+ * let the component resolve it by passing the `contentlet` input instead.
+ */
+export interface DotContentThumbnail {
+    type: DotContentThumbnailType;
+    /**
+     * Resolved asset URL. Empty string for `icon`. For non-playable videos it
+     * already carries the `#t=0.1` media fragment used to paint the first frame.
+     */
+    src: string;
+    /**
+     * Material Symbols glyph name (e.g. `insert_drive_file`). Always populated,
+     * on every type, so the viewer can fall back to it when the media errors.
+     */
+    icon: string;
+    alt: string;
+    /** Video only: render with controls (true) vs a static first-frame preview. */
+    playable?: boolean;
+}
+
+/**
+ * Options for `contentletToThumbnailModel`. Defaults mirror the legacy Stencil
+ * `dot-contentlet-thumbnail` element as used by most call sites.
+ */
+export interface DotContentletThumbnailOptions {
+    /** Binary/image field variable used to build field-scoped `/dA` URLs. */
+    fieldVariable?: string;
+    /** Render videos as playable (`<video controls>`). Default `false` (first-frame preview). */
+    playableVideo?: boolean;
+    /** When `false`, videos resolve to the icon fallback instead of a thumbnail. Default `true`. */
+    showVideoThumbnail?: boolean;
+}
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/utils/dot-content-thumbnail.utils.spec.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/utils/dot-content-thumbnail.utils.spec.ts
new file mode 100644
index 00000000000..7b96cbfa791
--- /dev/null
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/utils/dot-content-thumbnail.utils.spec.ts
@@ -0,0 +1,459 @@
+import { DotCMSContentlet, DotCMSTempFile } from '@dotcms/dotcms-models';
+
+import {
+    contentletToThumbnailModel,
+    resolveContentletIcon,
+    tempFileToThumbnailModel,
+    translateIconName
+} from './dot-content-thumbnail.utils';
+
+const INODE = 'fe160e65-5cf4-4ef6-9b1d-47c5326fec30';
+
+const createContentlet = (overrides: Record<string, unknown> = {}): DotCMSContentlet =>
+    ({
+        inode: INODE,
+        identifier: 'identifier-123',
+        title: 'A file',
+        modDate: '1727377876000',
+        baseType: 'DOTASSET',
+        contentType: 'dotAsset',
+        ...overrides
+    }) as unknown as DotCMSContentlet;
+
+const createTempFile = (overrides: Partial<DotCMSTempFile> = {}): DotCMSTempFile => ({
+    fileName: 'file.pdf',
+    folder: 'folder',
+    id: 'temp_123',
+    image: false,
+    length: 100,
+    mimeType: 'application/pdf',
+    referenceUrl: '/dA/temp_123/tmp/file.pdf',
+    thumbnailUrl: '/contentAsset/image/temp_123/tmp/filter/Thumbnail/thumbnail.png',
+    ...overrides
+});
+
+describe('translateIconName', () => {
+    it.each([
+        ['pdfIcon', 'insert_drive_file'],
+        ['docxIcon', 'insert_drive_file'],
+        ['mp4Icon', 'videocam'],
+        ['mp3Icon', 'audiotrack'],
+        ['jpgIcon', 'image'],
+        ['woffIcon', 'font_download'],
+        ['pageIcon', 'web'],
+        ['gearIcon', 'settings'],
+        ['contentIcon', 'library_books'],
+        ['formIcon', 'format_list_bulleted'],
+        ['personaIcon', 'person'],
+        ['folderIcon', 'folder'],
+        ['uknIcon', 'insert_drive_file']
+    ])('translates legacy name %s to %s', (raw, expected) => {
+        expect(translateIconName(raw)).toBe(expected);
+    });
+
+    it('passes through direct material icon names', () => {
+        expect(translateIconName('event_note')).toBe('event_note');
+    });
+
+    it('passes through the literal "Icon" as a direct name', () => {
+        expect(translateIconName('Icon')).toBe('Icon');
+    });
+
+    it('falls back to insert_drive_file for unknown Icon-suffixed extensions', () => {
+        expect(translateIconName('unknownextIcon')).toBe('insert_drive_file');
+    });
+
+    it.each([
+        ['', 'insert_drive_file'],
+        [null, 'insert_drive_file'],
+        [undefined, 'insert_drive_file']
+    ])('falls back to insert_drive_file for %s', (raw, expected) => {
+        expect(translateIconName(raw as string)).toBe(expected);
+    });
+});
+
+describe('resolveContentletIcon', () => {
+    it('prefers __icon__ for FILEASSET base type', () => {
+        const contentlet = createContentlet({
+            baseType: 'FILEASSET',
+            __icon__: 'pdfIcon',
+            contentTypeIcon: 'event_note',
+            icon: 'other'
+        });
+
+        expect(resolveContentletIcon(contentlet)).toBe('insert_drive_file');
+    });
+
+    it('prefers contentTypeIcon for non-FILEASSET base types', () => {
+        const contentlet = createContentlet({
+            __icon__: 'pdfIcon',
+            contentTypeIcon: 'event_note',
+            icon: 'other'
+        });
+
+        expect(resolveContentletIcon(contentlet)).toBe('event_note');
+    });
+
+    it('falls back through the precedence chain to icon', () => {
+        const contentlet = createContentlet({ icon: 'mp4Icon' });
+
+        expect(resolveContentletIcon(contentlet)).toBe('videocam');
+    });
+
+    it('falls back to insert_drive_file when no icon fields exist', () => {
+        expect(resolveContentletIcon(createContentlet())).toBe('insert_drive_file');
+    });
+});
+
+describe('contentletToThumbnailModel', () => {
+    describe('guard', () => {
+        it('returns icon model when inode is missing', () => {
+            const model = contentletToThumbnailModel(createContentlet({ inode: undefined }));
+
+            expect(model).toEqual({
+                type: 'icon',
+                src: '',
+                icon: 'insert_drive_file',
+                alt: 'A file'
+            });
+        });
+    });
+
+    describe('video', () => {
+        it('builds a playable video src with fieldVariable', () => {
+            const model = contentletToThumbnailModel(createContentlet({ mimeType: 'video/mp4' }), {
+                fieldVariable: 'asset',
+                playableVideo: true
+            });
+
+            expect(model.type).toBe('video');
+            expect(model.playable).toBe(true);
+            expect(model.src).toBe(`/dA/${INODE}/asset`);
+        });
+
+        it('falls back to titleImage for the playable src when no fieldVariable', () => {
+            const model = contentletToThumbnailModel(
+                createContentlet({ mimeType: 'video/mp4', titleImage: 'fileAsset' }),
+                { playableVideo: true }
+            );
+
+            expect(model.src).toBe(`/dA/${INODE}/fileAsset`);
+        });
+
+        it('builds a first-frame src (no fieldVariable, #t=0.1) when not playable', () => {
+            const model = contentletToThumbnailModel(createContentlet({ mimeType: 'video/mp4' }), {
+                fieldVariable: 'asset'
+            });
+
+            expect(model.type).toBe('video');
+            expect(model.playable).toBe(false);
+            expect(model.src).toBe(`/dA/${INODE}#t=0.1`);
+        });
+
+        it('detects video from metadata contentType', () => {
+            const model = contentletToThumbnailModel(
+                createContentlet({ metaData: { contentType: 'video/webm' } })
+            );
+
+            expect(model.type).toBe('video');
+        });
+
+        it('returns icon when showVideoThumbnail is false', () => {
+            const model = contentletToThumbnailModel(createContentlet({ mimeType: 'video/mp4' }), {
+                showVideoThumbnail: false
+            });
+
+            expect(model.type).toBe('icon');
+        });
+    });
+
+    describe('pdf', () => {
+        it('builds the pdf_page URL with fieldVariable', () => {
+            const model = contentletToThumbnailModel(
+                createContentlet({ mimeType: 'application/pdf' }),
+                { fieldVariable: 'asset' }
+            );
+
+            expect(model.type).toBe('pdf');
+            expect(model.src).toBe(
+                `/contentAsset/image/${INODE}/asset/pdf_page/1/resize_w/250/quality_q/45`
+            );
+        });
+
+        it('falls back to titleImage when no fieldVariable', () => {
+            const model = contentletToThumbnailModel(
+                createContentlet({ mimeType: 'application/pdf', titleImage: 'fileAsset' })
+            );
+
+            expect(model.src).toBe(
+                `/contentAsset/image/${INODE}/fileAsset/pdf_page/1/resize_w/250/quality_q/45`
+            );
+        });
+    });
+
+    describe('svg', () => {
+        it('resolves the raw asset URL even when fieldVariable is set', () => {
+            const model = contentletToThumbnailModel(
+                createContentlet({ mimeType: 'image/svg+xml', hasTitleImage: true }),
+                { fieldVariable: 'asset' }
+            );
+
+            expect(model.type).toBe('svg');
+            expect(model.src).toBe(`/contentAsset/image/${INODE}/asset`);
+        });
+    });
+
+    describe('image', () => {
+        it.each([[true], ['true']])('renders image when hasTitleImage is %p', (hasTitleImage) => {
+            const model = contentletToThumbnailModel(
+                createContentlet({ mimeType: 'image/jpeg', hasTitleImage })
+            );
+
+            expect(model.type).toBe('image');
+        });
+
+        it('builds the fieldVariable URL with modDateMilis cache buster', () => {
+            const model = contentletToThumbnailModel(
+                createContentlet({
+                    mimeType: 'image/jpeg',
+                    hasTitleImage: true,
+                    modDateMilis: 1727377876407
+                }),
+                { fieldVariable: 'asset' }
+            );
+
+            expect(model.src).toBe(`/dA/${INODE}/asset/500w/50q?r=1727377876407`);
+        });
+
+        it('falls back to modDate as cache buster when modDateMilis is missing', () => {
+            const model = contentletToThumbnailModel(
+                createContentlet({ mimeType: 'image/jpeg', hasTitleImage: true }),
+                { fieldVariable: 'asset' }
+            );
+
+            expect(model.src).toBe(`/dA/${INODE}/asset/500w/50q?r=1727377876000`);
+        });
+
+        it('uses the image strategy URL when contentlet has an image property and no fieldVariable', () => {
+            const model = contentletToThumbnailModel(
+                createContentlet({ image: '/some/image.png' })
+            );
+
+            expect(model.type).toBe('image');
+            expect(model.src).toBe(`/dA/${INODE}/image/resize_w/250/quality_q/45`);
+        });
+
+        it('uses the default URL when hasTitleImage is true and no fieldVariable/image', () => {
+            const model = contentletToThumbnailModel(
+                createContentlet({ hasTitleImage: true, modDateMilis: 99 })
+            );
+
+            expect(model.src).toBe(`/dA/${INODE}/500w/50q?r=99`);
+        });
+
+        it('renders image when metadata.isImage is true even without hasTitleImage', () => {
+            const model = contentletToThumbnailModel(
+                createContentlet({ assetMetaData: { isImage: true } })
+            );
+
+            expect(model.type).toBe('image');
+        });
+    });
+
+    describe('icon fallback', () => {
+        it.each([[false], ['false'], [undefined]])(
+            'returns icon when hasTitleImage is %p and nothing else matches',
+            (hasTitleImage) => {
+                const model = contentletToThumbnailModel(
+                    createContentlet({ mimeType: 'application/zip', hasTitleImage })
+                );
+
+                expect(model.type).toBe('icon');
+            }
+        );
+
+        it('populates icon and alt on every branch', () => {
+            const image = contentletToThumbnailModel(
+                createContentlet({ hasTitleImage: true, icon: 'jpgIcon' })
+            );
+            const video = contentletToThumbnailModel(
+                createContentlet({ mimeType: 'video/mp4', icon: 'mp4Icon' })
+            );
+
+            expect(image.icon).toBe('image');
+            expect(image.alt).toBe('A file');
+            expect(video.icon).toBe('videocam');
+            expect(video.alt).toBe('A file');
+        });
+
+        it('prefers metadata title over contentlet title for alt', () => {
+            const model = contentletToThumbnailModel(
+                createContentlet({ metaData: { title: 'photo.jpg', isImage: true } })
+            );
+
+            expect(model.alt).toBe('photo.jpg');
+        });
+    });
+});
+
+describe('tempFileToThumbnailModel', () => {
+    it('returns pdf for a pdf temp file using thumbnailUrl', () => {
+        const tempFile = createTempFile({
+            metadata: {
+                contentType: 'application/pdf',
+                fileSize: 100,
+                isImage: false,
+                length: 100,
+                modDate: 0,
+                name: 'file.pdf',
+                sha256: '',
+                title: 'file.pdf',
+                version: 1
+            }
+        });
+
+        const model = tempFileToThumbnailModel(tempFile);
+
+        expect(model.type).toBe('pdf');
+        expect(model.src).toBe(tempFile.thumbnailUrl);
+        expect(model.icon).toBe('insert_drive_file');
+    });
+
+    it('returns image when metadata.isImage is true', () => {
+        const tempFile = createTempFile({
+            fileName: 'photo.jpg',
+            metadata: {
+                contentType: 'image/jpeg',
+                fileSize: 100,
+                isImage: true,
+                length: 100,
+                modDate: 0,
+                name: 'photo.jpg',
+                sha256: '',
+                title: 'photo.jpg',
+                version: 1
+            }
+        });
+
+        const model = tempFileToThumbnailModel(tempFile);
+
+        expect(model).toEqual({
+            type: 'image',
+            src: tempFile.thumbnailUrl,
+            icon: 'image',
+            alt: 'photo.jpg'
+        });
+    });
+
+    it('falls back to referenceUrl when thumbnailUrl is empty', () => {
+        const tempFile = createTempFile({ thumbnailUrl: '' });
+
+        const model = tempFileToThumbnailModel(tempFile);
+
+        expect(model.src).toBe(tempFile.referenceUrl);
+    });
+
+    it('returns svg with the raw referenceUrl (not the rasterized thumbnail)', () => {
+        const tempFile = createTempFile({
+            fileName: 'logo.svg',
+            metadata: {
+                contentType: 'image/svg+xml',
+                fileSize: 100,
+                isImage: true,
+                length: 100,
+                modDate: 0,
+                name: 'logo.svg',
+                sha256: '',
+                title: 'logo.svg',
+                version: 1
+            }
+        });
+
+        const model = tempFileToThumbnailModel(tempFile);
+
+        expect(model.type).toBe('svg');
+        expect(model.src).toBe(tempFile.referenceUrl);
+    });
+
+    it('returns playable video for video content types', () => {
+        const tempFile = createTempFile({
+            fileName: 'clip.mp4',
+            metadata: {
+                contentType: 'video/mp4',
+                fileSize: 100,
+                isImage: false,
+                length: 100,
+                modDate: 0,
+                name: 'clip.mp4',
+                sha256: '',
+                title: 'clip.mp4',
+                version: 1
+            }
+        });
+
+        const model = tempFileToThumbnailModel(tempFile);
+
+        expect(model.type).toBe('video');
+        expect(model.playable).toBe(true);
+        expect(model.icon).toBe('videocam');
+    });
+
+    it('synthesizes fallback metadata when the temp file has none', () => {
+        const tempFile = createTempFile({
+            mimeType: 'image/png',
+            image: true,
+            metadata: undefined
+        });
+
+        const model = tempFileToThumbnailModel(tempFile);
+
+        expect(model.type).toBe('image');
+        expect(model.alt).toBe('file.pdf');
+    });
+
+    it('detects image from the content type when isImage is absent (image-editor save)', () => {
+        const tempFile = createTempFile({
+            fileName: 'f1.png',
+            mimeType: 'image/png',
+            image: false,
+            metadata: undefined
+        });
+
+        const model = tempFileToThumbnailModel(tempFile);
+
+        expect(model.type).toBe('image');
+        expect(model.src).toBe(tempFile.thumbnailUrl);
+    });
+
+    it('returns icon when there is no thumbnailUrl nor referenceUrl', () => {
+        const model = tempFileToThumbnailModel(
+            createTempFile({ thumbnailUrl: '', referenceUrl: '' })
+        );
+
+        expect(model.type).toBe('icon');
+        expect(model.src).toBe('');
+    });
+
+    it('returns icon for unknown content types with the extension glyph', () => {
+        const tempFile = createTempFile({
+            fileName: 'song.mp3',
+            mimeType: 'application/octet-stream',
+            metadata: {
+                contentType: 'application/octet-stream',
+                fileSize: 100,
+                isImage: false,
+                length: 100,
+                modDate: 0,
+                name: 'song.mp3',
+                sha256: '',
+                title: 'song.mp3',
+                version: 1
+            }
+        });
+
+        const model = tempFileToThumbnailModel(tempFile);
+
+        expect(model.type).toBe('icon');
+        expect(model.icon).toBe('audiotrack');
+    });
+});
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/utils/dot-content-thumbnail.utils.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/utils/dot-content-thumbnail.utils.ts
new file mode 100644
index 00000000000..93442e06bdf
--- /dev/null
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/utils/dot-content-thumbnail.utils.ts
@@ -0,0 +1,317 @@
+import { DotCMSContentlet, DotCMSTempFile, DotFileMetadata } from '@dotcms/dotcms-models';
+import { getFileMetadata } from '@dotcms/utils';
+
+import {
+    DotContentThumbnail,
+    DotContentletThumbnailOptions
+} from '../models/dot-content-thumbnail.model';
+
+const DEFAULT_ICON = 'insert_drive_file';
+
+const AUDIO_ICON = 'audiotrack';
+const DOC_ICON = DEFAULT_ICON;
+const IMAGE_ICON = 'image';
+const VIDEO_ICON = 'videocam';
+const FONT_ICON = 'font_download';
+
+/**
+ * Legacy extension → Material Symbols glyph map, ported verbatim from the
+ * Stencil `dot-contentlet-icon` element so icon parity is preserved.
+ */
+const EXTENSION_ICON_MAP: Record<string, string> = {
+    // Misc
+    page: 'web',
+    gear: 'settings',
+    content: 'library_books',
+    form: 'format_list_bulleted',
+    persona: 'person',
+    ukn: DOC_ICON,
+    folder: 'folder',
+
+    // Text
+    doc: DOC_ICON,
+    docx: DOC_ICON,
+    odt: DOC_ICON,
+    ott: DOC_ICON,
+    odm: DOC_ICON,
+
+    // Spreadsheet
+    csv: DOC_ICON,
+    numbers: DOC_ICON,
+    wks: DOC_ICON,
+    xls: DOC_ICON,
+    xlsx: DOC_ICON,
+    ods: DOC_ICON,
+    ots: DOC_ICON,
+
+    // Presentation
+    keynote: DOC_ICON,
+    ppt: DOC_ICON,
+    pptx: DOC_ICON,
+    odp: DOC_ICON,
+    otp: DOC_ICON,
+
+    // PDF
+    pdf: DOC_ICON,
+
+    // Video
+    asf: VIDEO_ICON,
+    avi: VIDEO_ICON,
+    mov: VIDEO_ICON,
+    mp4: VIDEO_ICON,
+    mpg: VIDEO_ICON,
+    ogg: VIDEO_ICON,
+    ogv: VIDEO_ICON,
+    rm: VIDEO_ICON,
+    vob: VIDEO_ICON,
+
+    // Image
+    bmp: IMAGE_ICON,
+    image: IMAGE_ICON,
+    jpeg: IMAGE_ICON,
+    jpg: IMAGE_ICON,
+    pct: IMAGE_ICON,
+    png: IMAGE_ICON,
+    gif: IMAGE_ICON,
+    webp: IMAGE_ICON,
+    svg: IMAGE_ICON,
+    ico: IMAGE_ICON,
+
+    // Audio
+    aac: AUDIO_ICON,
+    aif: AUDIO_ICON,
+    iff: AUDIO_ICON,
+    m3u: AUDIO_ICON,
+    mid: AUDIO_ICON,
+    mp3: AUDIO_ICON,
+    mpa: AUDIO_ICON,
+    ra: AUDIO_ICON,
+    wav: AUDIO_ICON,
+    wma: AUDIO_ICON,
+
+    // Code
+    vtl: DOC_ICON,
+    js: DOC_ICON,
+    jsx: DOC_ICON,
+    esm: DOC_ICON,
+    ts: DOC_ICON,
+    tsx: DOC_ICON,
+    html: DOC_ICON,
+    scss: DOC_ICON,
+    sass: DOC_ICON,
+    less: DOC_ICON,
+    css: DOC_ICON,
+
+    // Font
+    otf: FONT_ICON,
+    ttf: FONT_ICON,
+    ttc: FONT_ICON,
+    fnt: FONT_ICON,
+    woff: FONT_ICON,
+    woff2: FONT_ICON,
+    eot: FONT_ICON
+};
+
+const SVG_MIME_TYPE = 'image/svg+xml';
+const PDF_MIME_TYPE = 'application/pdf';
+
+/**
+ * Translates a dotCMS icon field value into a Material Symbols glyph name.
+ *
+ * Legacy values carry an `Icon` suffix (e.g. `pdfIcon`) where the prefix is a
+ * file extension resolved through {@link EXTENSION_ICON_MAP}; any other
+ * non-empty value is assumed to already be a Material icon name and passes
+ * through unchanged (same heuristic as the Stencil `dot-contentlet-icon`).
+ *
+ * @param raw icon field value from a contentlet (`__icon__`, `contentTypeIcon` or `icon`)
+ * @returns a Material Symbols glyph name, `insert_drive_file` when unresolvable
+ */
+export function translateIconName(raw: string | undefined | null): string {
+    if (!raw) {
+        return DEFAULT_ICON;
+    }
+
+    if (raw.includes('Icon') && raw !== 'Icon') {
+        const extension = raw.replace('Icon', '');
+
+        return EXTENSION_ICON_MAP[extension] || DEFAULT_ICON;
+    }
+
+    return raw;
+}
+
+/**
+ * Resolves the icon field of a contentlet following the legacy Stencil
+ * precedence and translates it to a Material Symbols glyph.
+ *
+ * @param contentlet the contentlet to resolve the icon for
+ * @returns a Material Symbols glyph name
+ */
+export function resolveContentletIcon(contentlet: DotCMSContentlet): string {
+    const raw =
+        contentlet.baseType === 'FILEASSET'
+            ? (contentlet['__icon__'] ?? contentlet['contentTypeIcon'] ?? contentlet['icon'])
+            : (contentlet['contentTypeIcon'] ?? contentlet['__icon__'] ?? contentlet['icon']);
+
+    return translateIconName(raw);
+}
+
+/**
+ * Maps a saved contentlet (FileAsset, dotAsset or contentlet with binary
+ * fields) to a render-ready {@link DotContentThumbnail}.
+ *
+ * URL strategies replicate the legacy Stencil `dot-contentlet-thumbnail`
+ * (`getImageURL`), with one deliberate fix: SVG resolves to the raw
+ * `/contentAsset/image/{inode}/asset` BEFORE the fieldVariable strategy, so
+ * vector images are never rasterized/cropped.
+ *
+ * Not covered (legacy modes with no Angular consumer): `backgroundImage`
+ * rendering and the ≥96px icon extension label.
+ *
+ * @param contentlet the contentlet to build the thumbnail for
+ * @param options see {@link DotContentletThumbnailOptions}
+ * @returns a resolved thumbnail model; `icon` is populated on every branch
+ */
+export function contentletToThumbnailModel(
+    contentlet: DotCMSContentlet,
+    options: DotContentletThumbnailOptions = {}
+): DotContentThumbnail {
+    const { fieldVariable, playableVideo = false, showVideoThumbnail = true } = options;
+
+    const metadata: Partial<DotFileMetadata> = getFileMetadata(contentlet);
+    const mimeType = metadata.contentType || contentlet.mimeType || '';
+    const alt = metadata.title || contentlet.title || '';
+    const icon = resolveContentletIcon(contentlet);
+    const iconModel: DotContentThumbnail = { type: 'icon', src: '', icon, alt };
+
+    const { inode } = contentlet;
+
+    if (!inode) {
+        return iconModel;
+    }
+
+    const variable = fieldVariable || contentlet.titleImage;
+    const cacheBuster = contentlet['modDateMilis'] || contentlet.modDate;
+
+    if (mimeType.includes('video')) {
+        if (!showVideoThumbnail) {
+            return iconModel;
+        }
+
+        return playableVideo
+            ? { type: 'video', src: `/dA/${inode}/${variable}`, icon, alt, playable: true }
+            : { type: 'video', src: `/dA/${inode}#t=0.1`, icon, alt, playable: false };
+    }
+
+    if (mimeType === PDF_MIME_TYPE) {
+        return {
+            type: 'pdf',
+            src: `/contentAsset/image/${inode}/${variable}/pdf_page/1/resize_w/250/quality_q/45`,
+            icon,
+            alt
+        };
+    }
+
+    if (mimeType === SVG_MIME_TYPE) {
+        return { type: 'svg', src: `/contentAsset/image/${inode}/asset`, icon, alt };
+    }
+
+    // hasTitleImage is typed boolean but some endpoints return the string 'true'
+    const hasTitleImage = contentlet.hasTitleImage as boolean | string;
+    const renderImage =
+        hasTitleImage === true ||
+        hasTitleImage === 'true' ||
+        !!contentlet['image'] ||
+        metadata.isImage === true;
+
+    if (renderImage) {
+        if (fieldVariable) {
+            return {
+                type: 'image',
+                src: `/dA/${inode}/${fieldVariable}/500w/50q?r=${cacheBuster}`,
+                icon,
+                alt
+            };
+        }
+
+        if (contentlet['image']) {
+            return {
+                type: 'image',
+                src: `/dA/${inode}/image/resize_w/250/quality_q/45`,
+                icon,
+                alt
+            };
+        }
+
+        return { type: 'image', src: `/dA/${inode}/500w/50q?r=${cacheBuster}`, icon, alt };
+    }
+
+    return iconModel;
+}
+
+/**
+ * Maps a just-uploaded temp file (`/api/v1/temp` response) to a render-ready
+ * {@link DotContentThumbnail}. Temp files carry their own preview URLs
+ * (`thumbnailUrl` / `referenceUrl`), so no `/dA` building is needed.
+ *
+ * @param tempFile the temp file to build the thumbnail for
+ * @returns a resolved thumbnail model; `icon` is populated on every branch
+ */
+export function tempFileToThumbnailModel(tempFile: DotCMSTempFile): DotContentThumbnail {
+    const metadata = tempFile.metadata ?? buildFallbackTempFileMetadata(tempFile);
+    const src = tempFile.thumbnailUrl || tempFile.referenceUrl;
+    const alt = metadata.name || tempFile.fileName || '';
+    const extension = (metadata.name || '').split('.').pop()?.toLowerCase() ?? '';
+    const icon = EXTENSION_ICON_MAP[extension] || DEFAULT_ICON;
+    const iconModel: DotContentThumbnail = { type: 'icon', src: '', icon, alt };
+
+    if (!src) {
+        return iconModel;
+    }
+
+    const fileType = metadata.contentType?.split('/')[0];
+
+    if (metadata.contentType === SVG_MIME_TYPE) {
+        // Prefer the raw file over the rasterized thumbnail so SVGs render uncropped
+        return { type: 'svg', src: tempFile.referenceUrl || src, icon, alt };
+    }
+
+    // isImage may be absent on synthesized metadata (e.g. image-editor saves),
+    // so an image/* content type also qualifies
+    if (metadata.isImage || fileType === 'image') {
+        return { type: 'image', src, icon, alt };
+    }
+
+    if (extension === 'pdf') {
+        return { type: 'pdf', src, icon, alt };
+    }
+
+    if (fileType === 'video') {
+        return { type: 'video', src, icon, alt, playable: true };
+    }
+
+    return iconModel;
+}
+
+/**
+ * Synthesizes a {@link DotFileMetadata} from the flat fields of a temp file.
+ * Temp files freshly returned by `/api/v1/temp` (e.g. after an image-editor
+ * save) may lack the `metadata` block — use this so downstream consumers can
+ * rely on a non-null metadata shape.
+ *
+ * @param tempFile the temp file missing its metadata block
+ * @returns metadata derived from mimeType/fileName/image/length
+ */
+export function buildFallbackTempFileMetadata(tempFile: DotCMSTempFile): DotFileMetadata {
+    return {
+        contentType: tempFile?.mimeType || '',
+        fileSize: tempFile?.length || 0,
+        isImage: tempFile?.image || false,
+        length: tempFile?.length || 0,
+        modDate: 0,
+        name: tempFile?.fileName || '',
+        sha256: '',
+        title: tempFile?.fileName || '',
+        version: 0
+    };
+}
diff --git a/core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.html b/core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.html
deleted file mode 100644
index fd6a8091d3e..00000000000
--- a/core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.html
+++ /dev/null
@@ -1,34 +0,0 @@
-@if (type) {
-    @switch (type) {
-        @case (CONTENT_THUMBNAIL_TYPE.image) {
-            <img
-                (error)="handleError()"
-                [src]="src"
-                [title]="name"
-                [alt]="name"
-                class="size-full object-cover"
-                data-testId="thumbnail-image" />
-        }
-        @case (CONTENT_THUMBNAIL_TYPE.video) {
-            <video (error)="handleError()" class="size-full" controls data-testId="thumbnail-video">
-                <source [src]="src" />
-            </video>
-        }
-        @case (CONTENT_THUMBNAIL_TYPE.pdf) {
-            <img
-                (error)="handleError()"
-                [src]="src"
-                [title]="name"
-                [alt]="name"
-                class="size-full object-cover"
-                data-testId="thumbnail-pdf" />
-        }
-        @default {
-            <i
-                [ngClass]="['pi', icon]"
-                [style]="{ 'font-size': iconSize, color: 'var(--color-palette-secondary-400)' }"
-                class="leading-none"
-                data-testId="thumbnail-icon"></i>
-        }
-    }
-}
diff --git a/core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.scss b/core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.scss
deleted file mode 100644
index b66bcde1930..00000000000
--- a/core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.scss
+++ /dev/null
@@ -1 +0,0 @@
-/* Deprecated: styles migrated to Tailwind utilities. */
diff --git a/core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.spec.ts b/core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.spec.ts
deleted file mode 100644
index bc7897a1fe9..00000000000
--- a/core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.spec.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-import { Spectator, byTestId, createComponentFactory } from '@ngneat/spectator/jest';
-
-import { DotCMSTempFile } from '@dotcms/dotcms-models';
-
-import {
-    CONTENT_THUMBNAIL_TYPE,
-    DotTempFileThumbnailComponent
-} from './dot-temp-file-thumbnail.component';
-
-const METADATA_MOCK = {
-    contentType: 'image/jpeg',
-    fileSize: 12312,
-    length: 12312,
-    isImage: true,
-    modDate: 12312,
-    name: 'image.png',
-    sha256: '12345',
-    title: 'Asset',
-    version: 1,
-    height: 100,
-    width: 100,
-    editableAsText: false
-};
-
-const TEMP_FILE_MOCK: DotCMSTempFile = {
-    fileName: 'Image.jpg',
-    folder: 'folder',
-    id: 'tempFileId',
-    image: true,
-    length: 10000,
-    mimeType: 'image/jpeg',
-    referenceUrl: '',
-    thumbnailUrl: '/dA/123-456/500w/50q/image.png',
-    metadata: METADATA_MOCK
-};
-
-describe('DotTempFileThumbnailComponent', () => {
-    let spectator: Spectator<DotTempFileThumbnailComponent>;
-    const createComponent = createComponentFactory(DotTempFileThumbnailComponent);
-
-    describe('video', () => {
-        beforeEach(async () => {
-            spectator = createComponent({
-                props: {
-                    tempFile: {
-                        ...TEMP_FILE_MOCK,
-                        thumbnailUrl: '',
-                        referenceUrl: '/dA/123-456',
-                        metadata: {
-                            ...METADATA_MOCK,
-                            name: 'video.mp4',
-                            contentType: 'video/mp4',
-                            isImage: false
-                        }
-                    }
-                }
-            });
-            spectator.detectChanges();
-            await spectator.fixture.whenStable();
-        });
-
-        it('should set thumbnailType to video when contentType is video/*', () => {
-            const videoElement = spectator.query(byTestId('thumbnail-video'));
-            const sourceElement = videoElement.querySelector('source');
-
-            expect(spectator.component.type).toBe(CONTENT_THUMBNAIL_TYPE.video);
-            expect(spectator.component.src).toBe('/dA/123-456');
-            expect(sourceElement.getAttribute('src')).toBe('/dA/123-456');
-            expect(sourceElement).toBeTruthy();
-            expect(videoElement).toBeTruthy();
-        });
-    });
-
-    describe('image', () => {
-        beforeEach(async () => {
-            spectator = createComponent({
-                props: {
-                    tempFile: {
-                        ...TEMP_FILE_MOCK,
-                        metadata: {
-                            ...METADATA_MOCK,
-                            name: 'image.png',
-                            contentType: 'image/png'
-                        }
-                    }
-                }
-            });
-            spectator.detectChanges();
-            await spectator.fixture.whenStable();
-        });
-
-        it('should set thumbnailType to image when contentType is image/*', () => {
-            const imageElement = spectator.query(byTestId('thumbnail-image'));
-
-            expect(spectator.component.type).toBe(CONTENT_THUMBNAIL_TYPE.image);
-            expect(spectator.component.src).toBe('/dA/123-456/500w/50q/image.png');
-            expect(imageElement.getAttribute('src')).toBe('/dA/123-456/500w/50q/image.png');
-            expect(imageElement.getAttribute('title')).toBe('image.png');
-            expect(imageElement.getAttribute('alt')).toBe('image.png');
-            expect(imageElement).toBeTruthy();
-        });
-    });
-
-    describe('pdf', () => {
-        beforeEach(async () => {
-            spectator = createComponent({
-                props: {
-                    tempFile: {
-                        ...TEMP_FILE_MOCK,
-                        fileName: 'file.pdf',
-                        thumbnailUrl: '/dA/123-456/500w/50q/file.pdf',
-                        referenceUrl: '/dA/123-456',
-                        metadata: {
-                            ...METADATA_MOCK,
-                            name: 'file.pdf',
-                            contentType: 'application/pdf',
-                            isImage: false
-                        }
-                    }
-                }
-            });
-            spectator.detectChanges();
-            await spectator.fixture.whenStable();
-        });
-
-        it('should set thumbnailType to pdf when the extension is pdf', () => {
-            const pdfElement = spectator.query(byTestId('thumbnail-pdf'));
-
-            expect(spectator.component.type).toBe(CONTENT_THUMBNAIL_TYPE.pdf);
-            expect(spectator.component.src).toBe('/dA/123-456/500w/50q/file.pdf');
-            expect(pdfElement.getAttribute('src')).toBe('/dA/123-456/500w/50q/file.pdf');
-            expect(pdfElement).toBeTruthy();
-        });
-    });
-});
diff --git a/core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.ts b/core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.ts
deleted file mode 100644
index a121d111679..00000000000
--- a/core-web/libs/ui/src/lib/components/dot-temp-file-thumbnail/dot-temp-file-thumbnail.component.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-import { NgClass } from '@angular/common';
-import {
-    ChangeDetectionStrategy,
-    Component,
-    Input,
-    OnChanges,
-    OnInit,
-    SimpleChanges
-} from '@angular/core';
-
-import { DotCMSTempFile, DotFileMetadata } from '@dotcms/dotcms-models';
-
-const ICON_MAP = {
-    html: 'pi-file',
-    pdf: 'pi-file-pdf',
-    image: 'pi-image',
-    video: 'pi-video',
-    msword: 'pi-file-word',
-    doc: 'pi-file-word',
-    docx: 'pi-file-word'
-};
-
-export enum CONTENT_THUMBNAIL_TYPE {
-    image = 'image',
-    video = 'video',
-    pdf = 'pdf',
-    icon = 'icon'
-}
-
-export interface DotThumbnailOptions {
-    inode: string;
-    name: string;
-    contentType: string;
-    tempUrl?: string;
-    iconSize?: string;
-    titleImage?: string;
-}
-
-@Component({
-    selector: 'dot-temp-file-thumbnail',
-    imports: [NgClass],
-    templateUrl: './dot-temp-file-thumbnail.component.html',
-    host: {
-        class: 'flex h-full w-full items-center justify-center'
-    },
-    changeDetection: ChangeDetectionStrategy.OnPush
-})
-export class DotTempFileThumbnailComponent implements OnInit, OnChanges {
-    @Input() tempFile: DotCMSTempFile;
-    @Input() iconSize = '1rem';
-
-    readonly CONTENT_THUMBNAIL_TYPE = CONTENT_THUMBNAIL_TYPE;
-    private readonly DEFAULT_ICON = 'pi-file';
-
-    src: string;
-    icon: string;
-    type: CONTENT_THUMBNAIL_TYPE;
-
-    get name(): string {
-        return this.metadata.name;
-    }
-
-    get metadata(): DotFileMetadata {
-        return this.tempFile.metadata || this.fallbackMetadata;
-    }
-
-    get extension(): string {
-        return this.metadata.name.split('.').pop();
-    }
-
-    get fileType(): string {
-        return this.metadata.contentType?.split('/')[0];
-    }
-
-    ngOnInit(): void {
-        this.#updateFromTempFile();
-    }
-
-    ngOnChanges(changes: SimpleChanges): void {
-        if (changes['tempFile']) {
-            this.#updateFromTempFile();
-        }
-    }
-
-    /**
-     * Handle error when image/video is not found
-     * Set thumbnail type to icon
-     *
-     * @memberof DotContentThumbnailComponent
-     */
-    handleError() {
-        this.type = this.CONTENT_THUMBNAIL_TYPE.icon;
-    }
-
-    #updateFromTempFile(): void {
-        this.icon = ICON_MAP[this.extension] || this.DEFAULT_ICON;
-        this.type = this.getThumbnailType();
-        this.src = this.tempFile.thumbnailUrl || this.tempFile.referenceUrl;
-    }
-
-    private getThumbnailType() {
-        if (this.metadata.isImage) {
-            return CONTENT_THUMBNAIL_TYPE.image;
-        }
-
-        if (this.extension == 'pdf') {
-            return CONTENT_THUMBNAIL_TYPE.pdf;
-        }
-
-        return CONTENT_THUMBNAIL_TYPE[this.fileType] || CONTENT_THUMBNAIL_TYPE.icon;
-    }
-
-    private get fallbackMetadata(): DotFileMetadata {
-        return {
-            contentType: this.tempFile?.mimeType || '',
-            fileSize: this.tempFile?.length || 0,
-            isImage: this.tempFile?.image || false,
-            length: this.tempFile?.length || 0,
-            modDate: 0,
-            name: this.tempFile?.fileName || '',
-            sha256: '',
-            title: this.tempFile?.fileName || '',
-            version: 0
-        };
-    }
-}

From 1898a99e29ca21e89ff039e7edc75c8dfaa912a4 Mon Sep 17 00:00:00 2001
From: Arcadio Quintero <oidacra@gmail.com>
Date: Fri, 3 Jul 2026 16:39:55 -0400
Subject: [PATCH 2/5] fix(ui): make dot-content-thumbnail styles self-contained
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The component shipped styled with Tailwind utilities only, but it also
renders inside bundles that do not include Tailwind — the legacy binary
field web component (dotcms-binary-field-builder) — where the thumbnail
collapsed to a zero-height host and the whole preview card flattened.

Replace every Tailwind utility (host layout, media visibility/transition,
loading overlay, icon sizing) with component-scoped styles so the viewer
and its renderers carry their own layout in any bundle. Behavior, class
hooks for consumers (img/video selectors, --dot-content-thumbnail-icon-color)
and testids are unchanged; specs updated to the new class names.

Refs: #36295
---
 .../dot-content-thumbnail-icon.component.ts   | 22 ++++++-
 .../dot-content-thumbnail-image.component.ts  | 26 +++++++--
 .../dot-content-thumbnail-video.component.ts  | 25 +++++++-
 .../dot-content-thumbnail.component.spec.ts   | 29 +++++-----
 .../dot-content-thumbnail.component.ts        | 58 ++++++++++++++-----
 5 files changed, 124 insertions(+), 36 deletions(-)

diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts
index 404d2db2b69..aa65627dab4 100644
--- a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts
@@ -6,6 +6,9 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
  * viewer host declares `container-type: size`) unless an explicit `size`
  * override is provided. Color is themeable from the outside via the
  * `--dot-content-thumbnail-icon-color` CSS custom property.
+ *
+ * Styles are self-contained (no Tailwind): the component also ships inside
+ * bundles without the Tailwind utilities (e.g. dotcms-binary-field-builder).
  */
 @Component({
     selector: 'dot-content-thumbnail-icon',
@@ -13,13 +16,28 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
         <i
             [style.font-size]="$size()"
             [attr.aria-label]="$alt()"
-            class="material-symbols-outlined text-[clamp(16px,55cqmin,72px)] leading-none text-(--dot-content-thumbnail-icon-color,var(--gray-700)) select-none"
+            class="material-symbols-outlined"
             role="img"
             data-testId="dot-content-thumbnail-icon">
             {{ $icon() }}
         </i>
     `,
-    host: { class: 'flex h-full w-full items-center justify-center' },
+    styles: `
+        :host {
+            display: flex;
+            height: 100%;
+            width: 100%;
+            align-items: center;
+            justify-content: center;
+        }
+
+        i {
+            font-size: clamp(16px, 55cqmin, 72px);
+            line-height: 1;
+            user-select: none;
+            color: var(--dot-content-thumbnail-icon-color, var(--gray-700, #6c7389));
+        }
+    `,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotContentThumbnailIconComponent {
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-image.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-image.component.ts
index e434871205c..e7027d1cf6a 100644
--- a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-image.component.ts
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-image.component.ts
@@ -5,6 +5,9 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core
  * types). Purely presentational — visibility during load is orchestrated by
  * the viewer, which hides this renderer until it emits `loaded`. Kept private
  * to the `dot-content-thumbnail` folder — consumers use the viewer.
+ *
+ * Styles are self-contained (no Tailwind): the component also ships inside
+ * bundles without the Tailwind utilities (e.g. dotcms-binary-field-builder).
  */
 @Component({
     selector: 'dot-content-thumbnail-image',
@@ -15,12 +18,27 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core
             [src]="$src()"
             [alt]="$alt()"
             [title]="$alt()"
-            [class.object-cover]="$fit() === 'cover'"
-            [class.object-contain]="$fit() === 'contain'"
-            class="size-full"
+            [class.thumbnail-image--contain]="$fit() === 'contain'"
+            class="thumbnail-image"
             data-testId="dot-content-thumbnail-image" />
     `,
-    host: { class: 'block h-full w-full' },
+    styles: `
+        :host {
+            display: block;
+            height: 100%;
+            width: 100%;
+        }
+
+        .thumbnail-image {
+            height: 100%;
+            width: 100%;
+            object-fit: cover;
+        }
+
+        .thumbnail-image--contain {
+            object-fit: contain;
+        }
+    `,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotContentThumbnailImageComponent {
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-video.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-video.component.ts
index aaf986a1be8..c20f0188aa9 100644
--- a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-video.component.ts
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-video.component.ts
@@ -5,6 +5,9 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core
  * controls; non-playable ones show a static first frame — the `src` carries a
  * `#t=0.1` media fragment (set by the mapper) so the browser seeks and paints
  * that frame without playback (replaces the legacy Stencil canvas approach).
+ *
+ * Styles are self-contained (no Tailwind): the component also ships inside
+ * bundles without the Tailwind utilities (e.g. dotcms-binary-field-builder).
  */
 @Component({
     selector: 'dot-content-thumbnail-video',
@@ -17,7 +20,7 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core
                 (error)="failed.emit()"
                 [src]="$src()"
                 [attr.aria-label]="$alt()"
-                class="size-full"
+                class="thumbnail-video"
                 controls
                 data-testId="dot-content-thumbnail-video"></video>
         } @else {
@@ -26,7 +29,7 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core
                 (error)="failed.emit()"
                 [src]="$src()"
                 [attr.aria-label]="$alt()"
-                class="pointer-events-none size-full object-cover"
+                class="thumbnail-video thumbnail-video--frame"
                 preload="metadata"
                 muted
                 playsinline
@@ -35,7 +38,23 @@ import { ChangeDetectionStrategy, Component, input, output } from '@angular/core
                 data-testId="dot-content-thumbnail-video-frame"></video>
         }
     `,
-    host: { class: 'block h-full w-full' },
+    styles: `
+        :host {
+            display: block;
+            height: 100%;
+            width: 100%;
+        }
+
+        .thumbnail-video {
+            height: 100%;
+            width: 100%;
+        }
+
+        .thumbnail-video--frame {
+            object-fit: cover;
+            pointer-events: none;
+        }
+    `,
     changeDetection: ChangeDetectionStrategy.OnPush
 })
 export class DotContentThumbnailVideoComponent {
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.spec.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.spec.ts
index 6b3b6eaf144..f74d71c85ed 100644
--- a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.spec.ts
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.spec.ts
@@ -117,7 +117,7 @@ describe('DotContentThumbnailComponent', () => {
             expect(img).toBeTruthy();
             expect(img.getAttribute('src')).toBe(IMAGE_THUMBNAIL.src);
             expect(img.getAttribute('alt')).toBe(IMAGE_THUMBNAIL.alt);
-            expect(img.classList).toContain('object-cover');
+            expect(img.classList).not.toContain('thumbnail-image--contain');
         });
 
         it('renders an image with object-contain for type svg', () => {
@@ -126,8 +126,7 @@ describe('DotContentThumbnailComponent', () => {
             const img = spectator.query<HTMLImageElement>(byTestId('dot-content-thumbnail-image'));
 
             expect(img.getAttribute('src')).toBe(SVG_THUMBNAIL.src);
-            expect(img.classList).toContain('object-contain');
-            expect(img.classList).not.toContain('object-cover');
+            expect(img.classList).toContain('thumbnail-image--contain');
         });
 
         it('renders an image with object-cover for type pdf', () => {
@@ -136,7 +135,7 @@ describe('DotContentThumbnailComponent', () => {
             const img = spectator.query<HTMLImageElement>(byTestId('dot-content-thumbnail-image'));
 
             expect(img.getAttribute('src')).toBe(PDF_THUMBNAIL.src);
-            expect(img.classList).toContain('object-cover');
+            expect(img.classList).not.toContain('thumbnail-image--contain');
         });
 
         it('renders a video with controls when playable', () => {
@@ -208,8 +207,10 @@ describe('DotContentThumbnailComponent', () => {
             const loading = spectator.query(byTestId('dot-content-thumbnail-loading'));
 
             expect(loading).toBeTruthy();
-            expect(loading.classList).not.toContain('opacity-0');
-            expect(spectator.query('dot-content-thumbnail-image').classList).toContain('opacity-0');
+            expect(loading.classList).not.toContain('thumbnail-loading--hidden');
+            expect(spectator.query('dot-content-thumbnail-image').classList).toContain(
+                'thumbnail-media--hidden'
+            );
         });
 
         it('starts as loaded for icon type (no pulse)', () => {
@@ -225,10 +226,10 @@ describe('DotContentThumbnailComponent', () => {
             spectator.detectChanges();
 
             expect(spectator.query(byTestId('dot-content-thumbnail-loading')).classList).toContain(
-                'opacity-0'
+                'thumbnail-loading--hidden'
             );
             expect(spectator.query('dot-content-thumbnail-image').classList).not.toContain(
-                'opacity-0'
+                'thumbnail-media--hidden'
             );
         });
 
@@ -260,7 +261,7 @@ describe('DotContentThumbnailComponent', () => {
 
             expect(spectator.query(byTestId('dot-content-thumbnail-loading'))).toBeFalsy();
             expect(spectator.query('dot-content-thumbnail-video').classList).not.toContain(
-                'opacity-0'
+                'thumbnail-media--hidden'
             );
         });
 
@@ -270,8 +271,10 @@ describe('DotContentThumbnailComponent', () => {
             const loading = spectator.query(byTestId('dot-content-thumbnail-loading'));
 
             expect(loading).toBeTruthy();
-            expect(loading.classList).not.toContain('opacity-0');
-            expect(spectator.query('dot-content-thumbnail-video').classList).toContain('opacity-0');
+            expect(loading.classList).not.toContain('thumbnail-loading--hidden');
+            expect(spectator.query('dot-content-thumbnail-video').classList).toContain(
+                'thumbnail-media--hidden'
+            );
 
             spectator.dispatchFakeEvent(
                 byTestId('dot-content-thumbnail-video-frame'),
@@ -280,10 +283,10 @@ describe('DotContentThumbnailComponent', () => {
             spectator.detectChanges();
 
             expect(spectator.query(byTestId('dot-content-thumbnail-loading')).classList).toContain(
-                'opacity-0'
+                'thumbnail-loading--hidden'
             );
             expect(spectator.query('dot-content-thumbnail-video').classList).not.toContain(
-                'opacity-0'
+                'thumbnail-media--hidden'
             );
         });
 
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts
index 68c746a63ee..b6d72fe6e76 100644
--- a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts
@@ -71,8 +71,8 @@ const EMPTY_THUMBNAIL: DotContentThumbnail = {
                     [src]="model.src"
                     [alt]="model.alt"
                     [playable]="model.playable ?? false"
-                    [class.opacity-0]="$state() === 'loading' && !model.playable"
-                    class="transition-opacity duration-300" />
+                    [class.thumbnail-media--hidden]="$state() === 'loading' && !model.playable"
+                    class="thumbnail-media" />
             }
             @case ('icon') {
                 <dot-content-thumbnail-icon
@@ -87,26 +87,56 @@ const EMPTY_THUMBNAIL: DotContentThumbnail = {
                     [src]="model.src"
                     [alt]="model.alt"
                     [fit]="$type() === 'svg' ? 'contain' : 'cover'"
-                    [class.opacity-0]="$state() === 'loading'"
-                    class="transition-opacity duration-300" />
+                    [class.thumbnail-media--hidden]="$state() === 'loading'"
+                    class="thumbnail-media" />
             }
         }
 
         @if ($hasLoadingOverlay()) {
             <div
-                class="dot-content-thumbnail__loading pointer-events-none absolute inset-0 overflow-hidden bg-gray-200 transition-opacity duration-300"
-                [class.opacity-0]="$state() !== 'loading'"
+                class="thumbnail-loading"
+                [class.thumbnail-loading--hidden]="$state() !== 'loading'"
                 data-testId="dot-content-thumbnail-loading"></div>
         }
     `,
-    host: {
-        class: 'relative flex h-full w-full items-center justify-center overflow-hidden [container-type:size]'
-    },
+    /* Styles are self-contained (no Tailwind): the component also ships inside
+       bundles without the Tailwind utilities (e.g. dotcms-binary-field-builder). */
     styles: `
-        /* Sliding-highlight shimmer, exact replica of PrimeNG p-skeleton (needs
-           keyframes, not expressible in Tailwind utilities). Uses the PrimeNG
-           token when the theme provides it, with the Lara default as fallback. */
-        .dot-content-thumbnail__loading::after {
+        :host {
+            position: relative;
+            display: flex;
+            height: 100%;
+            width: 100%;
+            align-items: center;
+            justify-content: center;
+            overflow: hidden;
+            container-type: size;
+        }
+
+        .thumbnail-media {
+            transition: opacity 0.3s;
+        }
+
+        .thumbnail-media--hidden {
+            opacity: 0;
+        }
+
+        .thumbnail-loading {
+            position: absolute;
+            inset: 0;
+            overflow: hidden;
+            pointer-events: none;
+            background: var(--color-palette-gray-200, #e5e7eb);
+            transition: opacity 0.3s;
+        }
+
+        .thumbnail-loading--hidden {
+            opacity: 0;
+        }
+
+        /* Sliding-highlight shimmer, exact replica of PrimeNG p-skeleton. Uses the
+           PrimeNG token when the theme provides it, with the Lara default as fallback. */
+        .thumbnail-loading::after {
             content: '';
             position: absolute;
             inset: 0;
@@ -121,7 +151,7 @@ const EMPTY_THUMBNAIL: DotContentThumbnail = {
         }
 
         /* Stop compositing work once the overlay has faded out */
-        .dot-content-thumbnail__loading.opacity-0::after {
+        .thumbnail-loading--hidden::after {
             animation: none;
         }
 

From c054a11b443b968bd3295cbcde50ada5840148c2 Mon Sep 17 00:00:00 2001
From: Arcadio Quintero <oidacra@gmail.com>
Date: Fri, 3 Jul 2026 16:47:51 -0400
Subject: [PATCH 3/5] fix(ui): drop size containment so dot-content-thumbnail
 works in auto-height wrappers
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

container-type: size made the thumbnail contribute zero height, collapsing
any consumer whose wrapper derives its height from content — notably the
file field below its 500px container breakpoint (2-column Edit Content
layouts around 1496px viewport), where the whole preview card flattened
to a border line.

Switch the host to container-type: inline-size (no height containment) and
make the icon auto-size clamp use cqi. Since inline-size alone cannot fit
the glyph to short rows, restore the explicit legacy iconSize at every call
site (48px file field/dataview, 72px asset card/contentlet block, 42px
suggestions, 36px content drive, 32px UVE palette, 24/30px relationship);
the cqi clamp remains as a sane fallback for consumers that omit it.

Refs: #36295
---
 .../nodes/contentlet-block/contentlet-block.component.html   | 5 ++++-
 .../suggestions-list-item.component.html                     | 2 +-
 .../dot-file-field-preview.component.html                    | 1 +
 .../dot-relationship-field.component.html                    | 2 ++
 .../dot-select-existing-content.component.html               | 1 +
 .../dot-folder-list-view/dot-folder-list-view.component.html | 1 +
 .../dot-uve-palette-contentlet.component.html                | 1 +
 .../components/dot-asset-card/dot-asset-card.component.html  | 1 +
 .../components/dot-dataview/dot-dataview.component.html      | 1 +
 .../components/dot-content-thumbnail-icon.component.ts       | 4 +++-
 .../dot-content-thumbnail/dot-content-thumbnail.component.ts | 5 ++++-
 11 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.html b/core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.html
index 23755727367..17a1bc6cce8 100644
--- a/core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.html
+++ b/core-web/libs/block-editor/src/lib/nodes/contentlet-block/contentlet-block.component.html
@@ -2,7 +2,10 @@
     <p-card class="flex! flex-row! items-center justify-start">
         <ng-template #header>
             <div class="box-border flex h-full items-center p-4! pr-0!">
-                <dot-content-thumbnail [contentlet]="data" class="relative h-[94px] w-[94px]" />
+                <dot-content-thumbnail
+                    [contentlet]="data"
+                    iconSize="72px"
+                    class="relative h-[94px] w-[94px]" />
             </div>
         </ng-template>
 
diff --git a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html
index 17e6b3fe2a3..3e051e04821 100644
--- a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html
+++ b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html
@@ -3,7 +3,7 @@
         <i class="material-symbols-outlined">{{ url }}</i>
     } @else {
         @if (data?.contentlet) {
-            <dot-content-thumbnail [contentlet]="data.contentlet" />
+            <dot-content-thumbnail [contentlet]="data.contentlet" iconSize="42px" />
         } @else {
             <img [src]="url" alt="" />
         }
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
index 8bf2d5b690c..dc8e615f751 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.html
@@ -17,6 +17,7 @@
         <div class="dot-file-field-preview__thumbnail">
             <dot-content-thumbnail
                 [thumbnail]="fileInfo.thumbnail"
+                iconSize="48px"
                 data-testId="contentlet-thumbnail" />
         </div>
         <div class="dot-file-field-preview__metadata">
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html
index c5687889023..48f4f3dcb68 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-relationship-field/dot-relationship-field.component.html
@@ -129,6 +129,7 @@
                                         class="h-14 w-20 shrink-0 overflow-hidden rounded-md bg-gray-100">
                                         <dot-content-thumbnail
                                             [contentlet]="item"
+                                            iconSize="24px"
                                             data-testId="contentlet-thumbnail" />
                                     </div>
                                 }
@@ -160,6 +161,7 @@
                                 <div class="h-14 w-20 shrink-0 overflow-hidden rounded-md">
                                     <dot-content-thumbnail
                                         [contentlet]="item"
+                                        iconSize="30px"
                                         data-testId="contentlet-thumbnail" />
                                 </div>
                             </div>
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html
index 458d84ee5de..c4eb771c35e 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-relationship-field/components/dot-select-existing-content/dot-select-existing-content.component.html
@@ -147,6 +147,7 @@
                             <div class="h-14 w-20 shrink-0 overflow-hidden rounded-md bg-gray-100">
                                 <dot-content-thumbnail
                                     [contentlet]="item"
+                                    iconSize="24px"
                                     data-testId="contentlet-thumbnail" />
                             </div>
                             <p class="truncate-text">{{ item.title }}</p>
diff --git a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.html b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.html
index c159fae57fe..813159f2379 100644
--- a/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.html
+++ b/core-web/libs/portlets/dot-content-drive/ui/src/lib/dot-folder-list-view/dot-folder-list-view.component.html
@@ -83,6 +83,7 @@
                             <dot-content-thumbnail
                                 [contentlet]="item"
                                 [options]="{ fieldVariable: item?.contentType }"
+                                iconSize="36px"
                                 data-testId="contentlet-thumbnail"
                                 [attr.data-table-id]="item.identifier" />
                         } @else {
diff --git a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.html b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.html
index 032a9fb385b..623b5170764 100644
--- a/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.html
+++ b/core-web/libs/portlets/edit-ema/ui/src/lib/palette/components/dot-uve-palette-contentlet/dot-uve-palette-contentlet.component.html
@@ -11,6 +11,7 @@
     <dot-content-thumbnail
         data-testid="contentlet-thumbnail"
         class="pointer-events-none"
+        iconSize="32px"
         [thumbnail]="$thumbnail()" />
 </div>
 
diff --git a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.html b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.html
index cfb98bd2a00..2d3da003518 100644
--- a/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.html
+++ b/core-web/libs/ui/src/lib/components/dot-asset-search/components/dot-asset-card/dot-asset-card.component.html
@@ -3,6 +3,7 @@
         <div class="thumbnail-container">
             <dot-content-thumbnail
                 [contentlet]="contentlet"
+                iconSize="72px"
                 data-testId="dot-contentlet-thumbnail" />
         </div>
     </ng-template>
diff --git a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.html b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.html
index 8e5cbc5061f..9f5ed1efe50 100644
--- a/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.html
+++ b/core-web/libs/ui/src/lib/components/dot-browser-selector/components/dot-dataview/dot-dataview.component.html
@@ -80,6 +80,7 @@
                 <div class="dataview-thumbnail">
                     <dot-content-thumbnail
                         [contentlet]="content"
+                        iconSize="48px"
                         data-testId="contentlet-thumbnail" />
                 </div>
             </td>
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts
index aa65627dab4..b1c305f6b38 100644
--- a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/components/dot-content-thumbnail-icon.component.ts
@@ -32,7 +32,9 @@ import { ChangeDetectionStrategy, Component, input } from '@angular/core';
         }
 
         i {
-            font-size: clamp(16px, 55cqmin, 72px);
+            /* cqi (inline size): the viewer host is an inline-size container only,
+               so this is a fallback for consumers that skip the iconSize input */
+            font-size: clamp(16px, 55cqi, 72px);
             line-height: 1;
             user-select: none;
             color: var(--dot-content-thumbnail-icon-color, var(--gray-700, #6c7389));
diff --git a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts
index b6d72fe6e76..aa620b36b5f 100644
--- a/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts
+++ b/core-web/libs/ui/src/lib/components/dot-content-thumbnail/dot-content-thumbnail.component.ts
@@ -110,7 +110,10 @@ const EMPTY_THUMBNAIL: DotContentThumbnail = {
             align-items: center;
             justify-content: center;
             overflow: hidden;
-            container-type: size;
+            /* inline-size only: size containment would zero the content's height
+               contribution and collapse auto-height wrappers (e.g. the file field
+               below its 500px container breakpoint) */
+            container-type: inline-size;
         }
 
         .thumbnail-media {

From 14485e83bca507b5f6527ccff50c00eb6dd2a1d3 Mon Sep 17 00:00:00 2001
From: Arcadio Quintero <oidacra@gmail.com>
Date: Fri, 3 Jul 2026 16:52:21 -0400
Subject: [PATCH 4/5] fix(edit-content): keep file field preview cards a
 uniform height on narrow layouts
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Below the preview's 500px container breakpoint the card height derives
from the media's natural ratio, so a near-square video produced a much
taller card than a 16:9 image next to it. Give the thumbnail a 16:9
aspect-ratio — effective only on the narrow layout, since on the wide
one both axes are already definite and aspect-ratio is ignored.

Refs: #36295
---
 .../dot-file-field-preview.component.scss                     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss
index ea2b6ed425e..430074473f8 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss
@@ -56,6 +56,10 @@
     justify-content: center;
     overflow: hidden;
     background-color: #e5e7eb;
+    // Narrow layout (container height: auto): keep every card the same height
+    // regardless of the media's natural ratio. Ignored on the wide layout,
+    // where both width and height are definite.
+    aspect-ratio: 16 / 9;
 
     @container preview (min-width: 500px) {
         max-width: 17.5rem;

From f6e498ebd1e5ef11199e250251739007137a31ed Mon Sep 17 00:00:00 2001
From: Arcadio Quintero <oidacra@gmail.com>
Date: Fri, 3 Jul 2026 16:55:22 -0400
Subject: [PATCH 5/5] fix(edit-content): cap the text-file code preview height
 on narrow layouts

Same narrow-layout issue as the media thumbnails: with the container at
height auto, the editableAsText code preview grew with its whole text
content. Apply the same 16:9 aspect-ratio cap (inert on the wide layout);
the existing bottom fade already signals the truncation.

Refs: #36295
---
 .../dot-file-field-preview.component.scss                     | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss
index 430074473f8..04754717d48 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-file-field/components/dot-file-field-preview/dot-file-field-preview.component.scss
@@ -37,6 +37,10 @@
     overflow: hidden;
     user-select: none;
     cursor: pointer;
+    // Narrow layout (container height: auto): cap the card like the media
+    // thumbnails instead of growing with the whole text content. Ignored on
+    // the wide layout, where both axes are definite.
+    aspect-ratio: 16 / 9;
 }
 
 .dot-file-field-preview__code-content {