diff --git a/packages/studio/src/components/editor/CanvasContextMenu.test.tsx b/packages/studio/src/components/editor/CanvasContextMenu.test.tsx
index 0fd9b6d21b..ccb00a088f 100644
--- a/packages/studio/src/components/editor/CanvasContextMenu.test.tsx
+++ b/packages/studio/src/components/editor/CanvasContextMenu.test.tsx
@@ -92,7 +92,7 @@ describe("CanvasContextMenu — handler gating", () => {
 
     // No menu opened at all — no buttons, no dead-end items, no DOM mutation.
     expect(menuButtons()).toHaveLength(0);
-    expect(document.body.querySelector(".fixed.z-50")).toBeNull();
+    expect(document.body.querySelector(".fixed.z-\\[200\\]")).toBeNull();
     expect(el.style.zIndex).toBe("3");
   });
 
diff --git a/packages/studio/src/components/editor/CanvasContextMenu.tsx b/packages/studio/src/components/editor/CanvasContextMenu.tsx
index 0fae550544..24601271c1 100644
--- a/packages/studio/src/components/editor/CanvasContextMenu.tsx
+++ b/packages/studio/src/components/editor/CanvasContextMenu.tsx
@@ -212,7 +212,7 @@ export const CanvasContextMenu = memo(function CanvasContextMenu({
   return createPortal(
     <div
       ref={menuRef}
-      className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
+      className="fixed z-[200] bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
       style={{ left: adjustedX, top: adjustedY }}
       onPointerDown={stopBubble}
       onMouseDown={stopBubble}
diff --git a/packages/studio/src/components/editor/TimelineFxPopover.test.tsx b/packages/studio/src/components/editor/TimelineFxPopover.test.tsx
index ff8bf2f40b..2a3249b432 100644
--- a/packages/studio/src/components/editor/TimelineFxPopover.test.tsx
+++ b/packages/studio/src/components/editor/TimelineFxPopover.test.tsx
@@ -160,7 +160,7 @@ describe("TimelineFxPopover", () => {
     const dialog = withViewportHeight(200, () =>
       dialogOf(mount({ anchorRect: rect(100, 120) }).host),
     );
-    // bottom:32 + maxHeight:160 puts the box at y = 8..40 — a margin on each side.
+    // bottom:32 + maxHeight:160 puts the box at y = 8..168 — a margin on each side.
     expect(dialog.style.bottom).toBe("32px");
     const bottom = Number.parseFloat(dialog.style.bottom);
     const height = Number.parseFloat(dialog.style.maxHeight);
diff --git a/packages/studio/src/components/editor/TimelineFxPopover.tsx b/packages/studio/src/components/editor/TimelineFxPopover.tsx
index 46c07bf05d..70f827bf6f 100644
--- a/packages/studio/src/components/editor/TimelineFxPopover.tsx
+++ b/packages/studio/src/components/editor/TimelineFxPopover.tsx
@@ -125,7 +125,7 @@ export function TimelineFxPopover({
       ref={rootRef}
       role="dialog"
       aria-label="Effects"
-      className="z-50 flex flex-col overflow-hidden rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl"
+      className="z-[200] flex flex-col overflow-hidden rounded-md border border-white/10 bg-[#1b1b1f] p-2 shadow-xl"
       style={clampedStyle(anchorRect)}
       onKeyDown={onKeyDown}
       onPointerDown={(event) => event.stopPropagation()}
diff --git a/packages/studio/src/player/components/AutomationSelectionMenu.tsx b/packages/studio/src/player/components/AutomationSelectionMenu.tsx
index f157f6e266..f64890a03b 100644
--- a/packages/studio/src/player/components/AutomationSelectionMenu.tsx
+++ b/packages/studio/src/player/components/AutomationSelectionMenu.tsx
@@ -41,7 +41,7 @@ export const AutomationSelectionMenu = memo(function AutomationSelectionMenu({
   return createPortal(
     <div
       ref={menuRef}
-      className="hf-automation-menu fixed z-50 min-w-[140px] rounded border border-panel-border-input bg-panel-bg-2 py-1 shadow-lg"
+      className="hf-automation-menu fixed z-[200] min-w-[140px] rounded border border-panel-border-input bg-panel-bg-2 py-1 shadow-lg"
       style={{ left: adjustedX, top: adjustedY }}
     >
       {AUTOMATION_SHAPES.map((shape) => (
diff --git a/packages/studio/src/player/components/ClipContextMenu.tsx b/packages/studio/src/player/components/ClipContextMenu.tsx
index 4a448aee7c..c7ccde2d12 100644
--- a/packages/studio/src/player/components/ClipContextMenu.tsx
+++ b/packages/studio/src/player/components/ClipContextMenu.tsx
@@ -48,7 +48,7 @@ export const ClipContextMenu = memo(function ClipContextMenu({
       ref={menuRef}
       role="menu"
       aria-label="Clip actions"
-      className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
+      className="fixed z-[200] bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
       style={{ left: adjustedX, top: adjustedY }}
     >
       {splitLabel && (
diff --git a/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx b/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx
index 5e0c0365b7..886defff80 100644
--- a/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx
+++ b/packages/studio/src/player/components/KeyframeDiamondContextMenu.tsx
@@ -96,7 +96,7 @@ export function KeyframeDiamondContextMenu({
       ref={menuRef}
       role="menu"
       aria-label="Keyframe actions"
-      className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px] overflow-y-auto"
+      className="fixed z-[200] bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px] overflow-y-auto"
       style={{ left: adjustedX, top: adjustedY, maxHeight: `calc(100vh - ${adjustedY + 8}px)` }}
     >
       {onMoveToPlayhead && (
diff --git a/packages/studio/src/player/components/TimelineFxButton.tsx b/packages/studio/src/player/components/TimelineFxButton.tsx
index 882ebe1abc..b874ecb18c 100644
--- a/packages/studio/src/player/components/TimelineFxButton.tsx
+++ b/packages/studio/src/player/components/TimelineFxButton.tsx
@@ -79,7 +79,7 @@ export function TimelineFxButton(props: TimelineFxButtonProps) {
             <div
               role="dialog"
               aria-label="Group these clips to add effects"
-              className="z-50 w-56 rounded-md border border-white/10 bg-[#1b1b1f] p-2.5 text-[11px] text-white/75 shadow-xl"
+              className="z-[200] w-56 rounded-md border border-white/10 bg-[#1b1b1f] p-2.5 text-[11px] text-white/75 shadow-xl"
               style={{ position: "fixed", left: anchorRect.left, top: anchorRect.bottom + 4 }}
               onPointerDown={(event) => event.stopPropagation()}
             >
diff --git a/packages/studio/src/player/components/TrackGapContextMenu.tsx b/packages/studio/src/player/components/TrackGapContextMenu.tsx
index 5808890817..8d2fd72ea2 100644
--- a/packages/studio/src/player/components/TrackGapContextMenu.tsx
+++ b/packages/studio/src/player/components/TrackGapContextMenu.tsx
@@ -75,7 +75,7 @@ export const TrackGapContextMenu = memo(function TrackGapContextMenu({
   return createPortal(
     <div
       ref={menuRef}
-      className="fixed z-50 bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
+      className="fixed z-[200] bg-neutral-900 border border-neutral-700 rounded-md shadow-lg py-1 min-w-[180px]"
       style={{ left: adjustedX, top: adjustedY }}
       onPointerLeave={() => onHoverAction(null)}
     >