@remotion/studio: Fix modal stacking above floating sidebars

[JonnyBurger]

Summary

• render Studio modals in the managed portal layer above floating sidebars
• allow modal z-index contexts to stack above the highest active overlay
• preserve floating sidebars when dismissing a modal with Escape

Testing

• bun run build
• bun run stylecheck
• bunx turbo run test --filter='@remotion/studio'
• manually verified the floating sidebar → New composition modal → Escape → Escape workflow

[vercel]

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

Project	Deployment	Actions	Updated (UTC)
bugs	Ready	Preview	Jul 31, 2026 8:42am
remotion	Ready	Preview	Jul 31, 2026 8:42am

[pullfrog]

✅ No new issues found.

Reviewed changes

• Portals modals above floating sidebars — the Modals component now renders via ReactDOM.createPortal into getPortal(currentZIndex + 1), one layer above the editor's base z-index context, ensuring modals sit above floating sidebars (which use getPortal(currentZIndex) in MobilePanel).
• Adds stackOnHighest to HigherZIndex — when enabled, the z-index is computed from Math.max(context.currentIndex, highestContext.highestIndex) + 1 rather than just context.currentIndex + 1, so a modal always opens above any active floating sidebar, context menu, or other overlay.
• Persists floating sidebars on Escape — because the modal's z-index is strictly above the sidebar's, Escape dismisses the modal first, leaving the sidebar intact for the next Escape.

The frozen stackedIndex ref means a sidebar that opens after a modal already exists would share the same z-index level, but this is not reachable in practice — the modal's full-viewport position: fixed overlay captures all pointer events.

  ^{｜ View workflow run ｜ Using DeepSeek Pro (free via Pullfrog for OSS) (Claude Opus not used — the program covers this model; add its provider key to run your pick) ｜ 𝕏}