@remotion/studio: Clean up Studio design

[JonnyBurger]

Summary

• align composition, asset, and inspector action rows around a shared compact design
• refresh Studio action and asset icons with file-type-specific variants
• refine selector focus states, metadata spacing, and toolbar icon alignment

Testing

• bun run build
• bun run stylecheck

[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 1:34pm
remotion	Ready	Preview, Comment	Jul 20, 2026 1:34pm

[pullfrog]

ℹ️ No critical issues — minor suggestions inline.

Reviewed changes — Design cleanup for Remotion Studio: shared compact row height, file-type-specific asset icons, refreshed inspector action icons, and refined focus/hover styling across the composition and asset selectors.

• Add AssetFileIcon and new file-type icons — selector rows now show audio, font, JSON, video, and image-specific SVGs instead of a generic file glyph.
• Unify row sizing — COMPACT_CONTROL_ROW_HEIGHT replaces local 32 px constants in asset and composition selectors plus inspector inline actions.
• Refresh inspector action appearance — icons grow to 18×18, inline actions get rounded corners and hover backgrounds, and labels like Add asset... are updated.
• Refine composition selector focus states — .__remotion-composition-selector-item suppresses default outlines and applies the custom focus box-shadow on :focus-visible.
• Hide selector action buttons during drag — composition and asset items hide context/render/copy buttons while being dragged.

---

Note: 1 inline comment(s) dropped because they did not anchor to lines inside the PR diff:

• packages/studio/src/components/AssetSelectorItem.tsx:581 (RIGHT) — line 581 (RIGHT) is not inside a diff hunk

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