fix(framework-editor): flip Linked Controls panel up when clipped (FRAME-8)

apps/framework-editor/app/components/table/RelationalCell.test.tsx

@@ -86,3 +86,35 @@ describe('RelationalCell on uncommitted rows', () => {
     );
   });
 });
+
+describe('RelationalCell panel placement (FRAME-8)', () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it('opens downward when there is room below', () => {
+    renderCell();
+    fireEvent.click(screen.getByText('None'));
+    const panel = screen.getByText('Linked Controls').closest('.bg-popover');
+    expect(panel?.className).toContain('top-0');
+    expect(panel?.className).not.toContain('bottom-0');
+  });
+
+  it('flips upward when the cell is near the viewport bottom', () => {
+    renderCell();
+    const trigger = screen.getByText('None').closest('div') as HTMLDivElement;
+    // window.innerHeight is 768 in jsdom; a cell ending at 760 leaves 8px below.
+    vi.spyOn(trigger, 'getBoundingClientRect').mockReturnValue({
+      bottom: 760,
+      top: 740,
+      left: 0,
+      right: 100,
+      width: 100,
+      height: 20,
+      x: 0,
+      y: 740,
+      toJSON: () => ({}),
+    } as DOMRect);
+    fireEvent.click(trigger);
+    const panel = screen.getByText('Linked Controls').closest('.bg-popover');
+    expect(panel?.className).toContain('bottom-0');
+  });
+});

apps/framework-editor/app/components/table/RelationalCell.tsx

@@ -42,6 +42,7 @@ export function RelationalCell({
   const [search, setSearch] = useState('');
   const [allItems, setAllItems] = useState<RelationalItem[]>([]);
   const [isLoading, setIsLoading] = useState(false);
+  const [dropUp, setDropUp] = useState(false);
   const containerRef = useRef<HTMLDivElement>(null);
 
   // Close when clicking outside
@@ -118,7 +119,13 @@ export function RelationalCell({
     return (
       <div
         className="hover:bg-muted/50 flex h-full cursor-pointer items-center px-2 py-1.5"
-        onClick={() => setIsExpanded(true)}
+        onClick={(e) => {
+          // Flip the panel upward when there isn't room below the cell, so it
+          // isn't clipped by the table's overflow-auto scroll container.
+          const rect = e.currentTarget.getBoundingClientRect();
+          setDropUp(window.innerHeight - rect.bottom < 340);
+          setIsExpanded(true);
+        }}
       >
         {items.length === 0 ? (
           <span className="text-muted-foreground text-sm italic">None</span>
@@ -134,7 +141,9 @@ export function RelationalCell({
   // Expanded view - show all items with controls
   return (
     <div
-      className="bg-popover border-border absolute left-0 top-0 z-50 min-w-[280px] rounded-xs border shadow-lg"
+      className={`bg-popover border-border absolute left-0 ${
+        dropUp ? 'bottom-0' : 'top-0'
+      } z-50 min-w-[280px] rounded-xs border shadow-lg`}
       ref={containerRef}
     >
       {/* Header */}