fix(studio): clamp context menu to viewport using actual rendered dimensions

Adds a useLayoutEffect that measures the context menu after render and
adjusts position if it overflows the viewport. The existing hardcoded
MENU_HEIGHT estimate was insufficient for shorter menus near the edge.

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

Author: mikewolfd

packages/formspec-studio/src/workspaces/editor/EditorCanvas.tsx

@@ -1,5 +1,5 @@
 /** @filedesc Main editor canvas with drag-and-drop, page tabs, context menu, and item palette. */
-import { useState, useEffect, useRef, useCallback, useMemo } from 'react';
+import { useState, useEffect, useLayoutEffect, useRef, useCallback, useMemo } from 'react';
 import { DragDropProvider, DragOverlay } from '@dnd-kit/react';
 import { PointerSensor, KeyboardSensor, PointerActivationConstraints } from '@dnd-kit/dom';
 import { useDefinition } from '../../state/useDefinition';
@@ -260,6 +260,17 @@ export function EditorCanvas() {
     };
   }, [contextMenu]);
 
+  // Clamp context menu to viewport using actual rendered dimensions
+  useLayoutEffect(() => {
+    const el = contextMenuRef.current;
+    if (!contextMenu || !el) return;
+    const rect = el.getBoundingClientRect();
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    if (rect.right > vw) el.style.left = `${Math.max(0, vw - rect.width)}px`;
+    if (rect.bottom > vh) el.style.top = `${Math.max(0, vh - rect.height)}px`;
+  }, [contextMenu]);
+
   // Escape to deselect (only when context menu is not open)
   useEffect(() => {
     if (contextMenu) return; // context menu's own Escape handler takes priority