fix(studio): the Shift+drag edit popover stays on screen when the timeline sits low

EditPopover positions itself with position: fixed and viewport
coordinates, but rendered inline inside the timeline's dockview panel,
whose transformed overlay becomes the containing block. The popover
landed relative to the panel and was clipped below the window. Portal it
to document.body like the other timeline menus.

Fixes #5376

Author: MannXo

packages/studio/src/player/components/EditModal.test.tsx

@@ -0,0 +1,34 @@
+// @vitest-environment happy-dom
+import { act } from "react";
+import { createRoot } from "react-dom/client";
+import { afterEach, describe, expect, it } from "vitest";
+import { EditPopover } from "./EditModal";
+
+(globalThis as unknown as { IS_REACT_ACT_ENVIRONMENT: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+afterEach(() => {
+  document.body.innerHTML = "";
+});
+
+describe("EditPopover", () => {
+  // The timeline panel's dockview overlay is transformed, which makes it the containing
+  // block for position: fixed. Rendered inside it, the popover's viewport coordinates are
+  // resolved against the panel, so a Shift+drag low on the page puts it out of view.
+  it("renders on document.body, outside a transformed panel", () => {
+    const panel = document.createElement("div");
+    panel.style.transform = "translateZ(0)";
+    document.body.appendChild(panel);
+    const root = createRoot(panel);
+    act(() =>
+      root.render(
+        <EditPopover rangeStart={1} rangeEnd={2} anchorX={400} anchorY={900} onClose={() => {}} />,
+      ),
+    );
+
+    const textarea = document.querySelector("textarea");
+    expect(textarea).not.toBeNull();
+    expect(panel.contains(textarea)).toBe(false);
+
+    act(() => root.unmount());
+  });
+});

packages/studio/src/player/components/EditModal.tsx

@@ -1,4 +1,5 @@
 import { useState, useCallback, useMemo, useRef } from "react";
+import { createPortal } from "react-dom";
 import { useMountEffect } from "../../hooks/useMountEffect";
 import { usePlayerStore } from "../store/playerStore";
 import { formatTime } from "../lib/time";
@@ -126,7 +127,7 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
     zIndex: 200,
   };
 
-  return (
+  return createPortal(
     <div ref={popoverRef} style={style}>
       <div className="w-80 bg-neutral-900 border border-neutral-700/60 rounded-xl shadow-2xl shadow-black/40 overflow-hidden">
         {/* Header */}
@@ -205,6 +206,7 @@ export function EditPopover({ rangeStart, rangeEnd, anchorX, anchorY, onClose }:
           </button>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body,
   );
 }