From b1d5c0aaeef8ffe029044fc62928a646750f7364 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Miguel=20=C3=81ngel?= <miguel.sierra@heygen.com>
Date: Mon, 30 Mar 2026 20:58:32 +0200
Subject: [PATCH] fix(studio): use object-contain for thumbnails so portrait
 videos display correctly

object-cover was cropping 9:16 portrait videos to a narrow slice inside
the fixed landscape 80x45px thumbnail cells. object-contain shows the
full frame with neutral-background letterboxing. Applies to Renders tab,
Compositions tab, Assets tab, and timeline clip strip thumbnails.
---
 packages/studio/src/components/sidebar/CompositionsTab.tsx     | 2 +-
 packages/studio/src/components/ui/VideoFrameThumbnail.tsx      | 2 +-
 packages/studio/src/player/components/CompositionThumbnail.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/studio/src/components/sidebar/CompositionsTab.tsx b/packages/studio/src/components/sidebar/CompositionsTab.tsx
index 6e46001b82..7235ce8b4e 100644
--- a/packages/studio/src/components/sidebar/CompositionsTab.tsx
+++ b/packages/studio/src/components/sidebar/CompositionsTab.tsx
@@ -162,7 +162,7 @@ function CompCard({
           src={thumbnailUrl}
           alt={name}
           loading="lazy"
-          className="w-full h-full object-cover"
+          className="w-full h-full object-contain"
           onError={(e) => {
             (e.target as HTMLImageElement).style.display = "none";
           }}
diff --git a/packages/studio/src/components/ui/VideoFrameThumbnail.tsx b/packages/studio/src/components/ui/VideoFrameThumbnail.tsx
index 5db47f80fc..ff45cf3b48 100644
--- a/packages/studio/src/components/ui/VideoFrameThumbnail.tsx
+++ b/packages/studio/src/components/ui/VideoFrameThumbnail.tsx
@@ -50,5 +50,5 @@ export function VideoFrameThumbnail({ src }: { src: string }) {
     return <div className="w-full h-full bg-neutral-800 animate-pulse" />;
   }
 
-  return <img src={frame} alt="" draggable={false} className="w-full h-full object-cover" />;
+  return <img src={frame} alt="" draggable={false} className="w-full h-full object-contain" />;
 }
diff --git a/packages/studio/src/player/components/CompositionThumbnail.tsx b/packages/studio/src/player/components/CompositionThumbnail.tsx
index ae9722a4ca..29239b43f0 100644
--- a/packages/studio/src/player/components/CompositionThumbnail.tsx
+++ b/packages/studio/src/player/components/CompositionThumbnail.tsx
@@ -112,7 +112,7 @@ export const CompositionThumbnail = memo(function CompositionThumbnail({
                 onLoad={(e) => {
                   (e.target as HTMLImageElement).style.opacity = "1";
                 }}
-                className="absolute inset-0 w-full h-full object-cover"
+                className="absolute inset-0 w-full h-full object-contain"
                 style={{ opacity: 0, transition: "opacity 200ms ease-out" }}
               />
             </div>