@remotion/studio: Add padding when fitting compositions

[JonnyBurger]

Summary

• leave a 16px screen-space gutter around compositions when Studio preview size is set to Fit
• keep assets and explicit zoom levels unchanged
• use the padded Fit scale consistently for zoom gestures, drops, rulers, guides, and useCurrentScale()

Testing

• bun test packages/studio/src/test/studio-fit-padding.test.ts
• bun run build
• bun run stylecheck

Closes #9337

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview, Comment	Jul 20, 2026 12:33pm
remotion	Ready	Preview, Comment	Jul 20, 2026 12:33pm

[pullfrog]

✅ No new issues found.

Reviewed changes — This PR adds a 16px screen-space gutter around compositions when Remotion Studio's preview size is set to Fit, while leaving asset previews and explicit zoom levels unchanged.

• Adds packages/studio/src/helpers/studio-fit-padding.ts — New utilities (calculateStudioScale, calculateStudioCanvasTransformation, getStudioPaddedCanvasSize) compute the padded canvas size and apply the padding as a translation for auto-fit positioning.
• Threads addFitPadding through Canvas.tsx and get-effective-translation.ts — All scale computations for compositions now use the padded canvas size, including zoom gestures, drop positioning, and zoom-in/zoom-out actions.
• Updates Preview.tsx and use-studio-canvas-dimensions.ts — Rendering and overlay dimensions use the padded transformation, while non-composition content keeps the original PlayerInternals behavior.
• Provides padded canvas size via Editor.tsx CurrentScaleContext — useCurrentScale() now reports the same padded fit scale as the visual preview.
• Adds unit tests — studio-fit-padding.test.ts covers width-constrained, height-constrained, and explicit-zoom cases.

  ^{｜ View workflow run ｜ Using Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏}

[pullfrog]

✅ No new issues in the new commit.

Reviewed changes since last review — The follow-up commit "@remotion/studio: Fix asymmetric Fit padding" separates the full layout canvas size from the padded canvas size used only for auto-fit scale calculations in useCurrentScale().

• Adds InternalCurrentScaleContextType in packages/core/src/use-current-scale.ts — Extends the internal 'canvas-size' context with canvasSizeForAuto so the layout bounds remain the actual container size while auto-fit scale uses the padded bounds.
• Updates useCurrentScale() to read canvasSizeForAuto — Auto-fit now respects the 16px Studio gutter; explicit zoom levels still ignore canvas size and return the numeric zoom.
• Adds getStudioCurrentScaleContext() in packages/studio/src/helpers/studio-fit-padding.ts — Studio's CurrentScaleContext.Provider now supplies both sizes without leaking the padding into layout math.
• Updates Editor.tsx — Replaces the unconditional padded canvasSize value with getStudioCurrentScaleContext(size).
• Adds a test for size separation — keeps the layout size separate from the auto-fit size verifies that canvasSize stays at the full container size while canvasSizeForAuto reflects the padding.

  ^{｜ Fix it ➔ ｜ View workflow run ｜ Using Kimi K2 (free via Pullfrog for OSS) ｜ 𝕏}