From a94ca4f5d37f566bf00aa2bbeb017b85b65e47e1 Mon Sep 17 00:00:00 2001
From: Vance Ingalls <vance@heygen.com>
Date: Mon, 11 May 2026 18:04:07 -0700
Subject: [PATCH] fix(studio): adapt sidebar thumbnail container to composition
 aspect ratio (#728)

Portrait compositions (1080x1920) rendered pillarboxed inside a fixed 80x45px
landscape container, wasting space with black bars on both sides.

The thumbnail container now derives its dimensions from the composition's
stage size: landscape gets 80px wide, portrait gets 45px tall. The preview
scale calculation uses matching card dimensions so the iframe fills the
container without letterboxing.

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../src/components/sidebar/CompositionsTab.tsx       | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/packages/studio/src/components/sidebar/CompositionsTab.tsx b/packages/studio/src/components/sidebar/CompositionsTab.tsx
index 12dc558da..4b2cab15c 100644
--- a/packages/studio/src/components/sidebar/CompositionsTab.tsx
+++ b/packages/studio/src/components/sidebar/CompositionsTab.tsx
@@ -55,9 +55,12 @@ function CompCard({
   const name = comp.replace(/^compositions\//, "").replace(/\.html$/, "");
   const thumbnailUrl = `/api/projects/${projectId}/thumbnail/${comp}?t=2`;
   const previewUrl = `/api/projects/${projectId}/preview/comp/${comp}`;
+  const isPortrait = stageSize.height > stageSize.width;
+  const cardWidth = isPortrait ? Math.round((45 * stageSize.width) / stageSize.height) : 80;
+  const cardHeight = isPortrait ? 45 : Math.round((80 * stageSize.height) / stageSize.width);
   const previewScale = resolveCompositionPreviewScale({
-    cardWidth: 80,
-    cardHeight: 45,
+    cardWidth,
+    cardHeight,
     stageWidth: stageSize.width,
     stageHeight: stageSize.height,
   });
@@ -73,7 +76,10 @@ function CompCard({
           : "border-l-2 border-transparent hover:bg-neutral-800/50"
       }`}
     >
-      <div className="w-20 h-[45px] rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative">
+      <div
+        className="rounded overflow-hidden bg-neutral-900 flex-shrink-0 relative"
+        style={{ width: cardWidth, height: cardHeight }}
+      >
         {/* Live iframe preview on hover */}
         {hovered && (
           <iframe