fix(studio): slide the FX popover in-bounds instead of hanging it off the edge

Review found the minimum defeating the viewport cap: `Math.max(MIN_POPOVER_HEIGHT,
available)` kept the box 160px tall even when the chosen gap was smaller, so the
box extended past the edge it opened away from. At 200px of viewport with the
anchor at 100..120 it flipped up to `bottom: 104px` and spanned y = -64..96 —
every preset still reachable, but through a ~57px window with the top third of
the dialog off-screen. Reachable at high browser zoom, not only in a synthetic
short window: `available` drops under 160 once the gap is under ~172px, which
400% zoom on a 1080p display produces on both sides.

Shrinking to the gap would undo the floor on purpose (a 20px gap gives a 20px
popover — the vanishing popover in a new costume), so honour the floor and clamp
the resulting box into the viewport the way `left` already is. Two parts:

- Cap the floor by the window itself (`innerHeight - 2 * VIEWPORT_MARGIN`). The
  minimum is a floor against a tight gap, not against a tight window; below
  176px of viewport, physical space has to win.
- Inset the `top` / `bottom` offset to `innerHeight - height - VIEWPORT_MARGIN`,
  so a floor larger than the gap slides the box back in rather than off the top.

The tight case now lands at `bottom: 32px` with `maxHeight: 160px` — the box at
y = 8..40, one margin on each side. The two ordinary cases are unchanged
(34/726 down, 72/688 up), which the existing tests pin.

Tests: two added — both edges in-bounds when the minimum exceeds the gap, and
the floor yielding when the whole window is shorter than it. Both fail on the
previous arithmetic (104px vs 32px, 160px vs 104px). The three pre-existing
geometry tests now pin `window.innerHeight` through one shared helper instead of
inheriting happy-dom's 768 default, so their expected numbers are derivable from
the test and immune to a dependency bump.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: vanceingalls

packages/studio/src/components/editor/TimelineFxPopover.test.tsx

@@ -14,6 +14,18 @@ function rect(top: number, bottom: number): DOMRect {
   return { left: 0, top, right: 0, bottom } as DOMRect;
 }
 
+/** Pin the viewport height: every expected number below is derived from it, and
+ *  happy-dom's 768 default is not something this file should silently inherit. */
+function withViewportHeight<T>(value: number, run: () => T): T {
+  const previous = window.innerHeight;
+  Object.defineProperty(window, "innerHeight", { value, configurable: true });
+  try {
+    return run();
+  } finally {
+    Object.defineProperty(window, "innerHeight", { value: previous, configurable: true });
+  }
+}
+
 function dialogOf(host: HTMLElement): HTMLElement {
   const el = host.querySelector('[role="dialog"]');
   if (!el) throw new Error("no dialog");
@@ -112,35 +124,58 @@ describe("TimelineFxPopover", () => {
     expect(onClose).not.toHaveBeenCalled();
   });
 
-  // These four guard the regression that shipped once already: an uncapped
+  // These guard the regression that shipped once already: an uncapped
   // popover grew past the gap it opened into, ran under the timeline chrome and
   // took its footer with it, and nothing scrolled.
   it("caps its height to the space below when it opens downward", () => {
     // spaceBelow 738 > spaceAbove 10, so it opens down: 738 - margin(8) - gap(4).
-    const { host } = mount({ anchorRect: rect(10, 30) });
-    const dialog = dialogOf(host);
+    const dialog = withViewportHeight(768, () =>
+      dialogOf(mount({ anchorRect: rect(10, 30) }).host),
+    );
     expect(dialog.style.top).toBe("34px");
     expect(dialog.style.maxHeight).toBe("726px");
   });
 
   it("caps its height to the space above when it flips upward", () => {
     // spaceBelow 48 < 260 and spaceAbove 700 is larger, so it flips up.
-    const { host } = mount({ anchorRect: rect(700, 720) });
-    const dialog = dialogOf(host);
+    const dialog = withViewportHeight(768, () =>
+      dialogOf(mount({ anchorRect: rect(700, 720) }).host),
+    );
     expect(dialog.style.bottom).toBe("72px");
     expect(dialog.style.maxHeight).toBe("688px");
   });
 
   it("never caps below a usable minimum, however tight the gap", () => {
-    const innerHeight = window.innerHeight;
-    Object.defineProperty(window, "innerHeight", { value: 200, configurable: true });
-    try {
-      // Both gaps are tiny (80 below / 100 above); the cap must not collapse.
-      const { host } = mount({ anchorRect: rect(100, 120) });
-      expect(dialogOf(host).style.maxHeight).toBe("160px");
-    } finally {
-      Object.defineProperty(window, "innerHeight", { value: innerHeight, configurable: true });
-    }
+    // Both gaps are tiny (80 below / 100 above); the cap must not collapse.
+    const dialog = withViewportHeight(200, () =>
+      dialogOf(mount({ anchorRect: rect(100, 120) }).host),
+    );
+    expect(dialog.style.maxHeight).toBe("160px");
+  });
+
+  it("keeps both edges in the viewport when the minimum exceeds the gap", () => {
+    // The case the minimum used to lose: at 200px of viewport (roughly 400% zoom
+    // on a laptop) neither gap can hold 160px, so honouring the floor has to
+    // slide the box in rather than hang its top edge off-screen.
+    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.
+    expect(dialog.style.bottom).toBe("32px");
+    const bottom = Number.parseFloat(dialog.style.bottom);
+    const height = Number.parseFloat(dialog.style.maxHeight);
+    expect(bottom).toBeGreaterThanOrEqual(8);
+    expect(200 - bottom - height).toBeGreaterThanOrEqual(8);
+  });
+
+  it("shrinks below the minimum only when the whole window is shorter", () => {
+    // A floor against a tight gap is not a floor against a tight window: 120px of
+    // viewport cannot hold 160px, and hanging off the edge is worse than short.
+    const dialog = withViewportHeight(120, () =>
+      dialogOf(mount({ anchorRect: rect(60, 80) }).host),
+    );
+    expect(dialog.style.maxHeight).toBe("104px");
+    expect(dialog.style.bottom).toBe("8px");
   });
 
   it("scrolls the preset list and leaves the footer outside the scroller", () => {

packages/studio/src/components/editor/TimelineFxPopover.tsx

@@ -36,14 +36,31 @@ function clampedStyle(anchorRect: DOMRect): CSSProperties {
   // footer ("+ effect" / "Open rack") went with it. Cap to whatever the chosen
   // side actually has and let the list scroll inside that.
   const available = (openUpward ? spaceAbove : spaceBelow) - VIEWPORT_MARGIN - 4;
+  // The minimum is a floor against a tight GAP, not against a tight window: keep
+  // a usable list when the gap is smaller than 160px, but never ask for more
+  // height than the viewport itself can hold.
+  const height = Math.min(
+    Math.max(MIN_POPOVER_HEIGHT, available),
+    window.innerHeight - VIEWPORT_MARGIN * 2,
+  );
+  // A floor larger than the gap would hang the box off the edge it opened away
+  // from — reachable at high browser zoom, where both gaps fall under ~172px.
+  // Slide it back in-bounds the way `left` is already clamped, rather than
+  // shrinking below the floor: the offset that keeps BOTH edges inside is
+  // `innerHeight - height - VIEWPORT_MARGIN`, from either side.
+  const inset = (desired: number) =>
+    Math.max(
+      VIEWPORT_MARGIN,
+      Math.min(desired, Math.max(VIEWPORT_MARGIN, window.innerHeight - height - VIEWPORT_MARGIN)),
+    );
   return {
     position: "fixed",
     left,
     width: POPOVER_WIDTH,
-    maxHeight: Math.max(MIN_POPOVER_HEIGHT, available),
+    maxHeight: height,
     ...(openUpward
-      ? { bottom: window.innerHeight - anchorRect.top + 4 }
-      : { top: anchorRect.bottom + 4 }),
+      ? { bottom: inset(window.innerHeight - anchorRect.top + 4) }
+      : { top: inset(anchorRect.bottom + 4) }),
   };
 }