Skip to content

fix(studio): adapt sidebar thumbnail container to composition aspect ratio #728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
vanceingalls merged 1 commit into from
May 12, 2026
Merged

fix(studio): adapt sidebar thumbnail container to composition aspect ratio #728

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 9 additions & 3 deletions packages/studio/src/components/sidebar/CompositionsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
});
Expand All @@ -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
Expand Down
Loading