Keep a long value inside the panel that shows it

The JSON preview capped a ScrollArea rather than the pre inside it. Radix
sizes that viewport in percent, which resolves to the content's own height
against a box carrying only a max-height, so a list or dict of any length
spilled out of the node panel and the edge popover and painted over the
sections below.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01SKL7sUgNWhukDEz95vSMQv

frontend/src/components/Flow/ValuePreview.tsx

@@ -3,10 +3,16 @@ import { useState } from "react"
 
 import type { DType } from "@/client"
 import { Marquee } from "@/components/Common/Marquee"
-import { ScrollArea } from "@/components/ui/scroll-area"
 import { cn, si } from "@/lib/utils"
 
-/** How much of a structured value is worth unfolding in a side panel. */
+/**
+ * How much of a structured value is worth unfolding in a side panel.
+ *
+ * The cap sits on the `pre` itself rather than on a `ScrollArea`: that one
+ * sizes its viewport in percent, which resolves to the content's own height
+ * against a box that has only a maximum, so a long value spills out of the
+ * panel or popover and paints over whatever is below it.
+ */
 const MAX_HEIGHT = "max-h-48"
 
 function count(n: number, one: string, many = `${one}s`): string {
@@ -104,11 +110,14 @@ export function ValuePreview({
         <Marquee text={summarize(value, dtype)} className="flex-1 font-mono" />
       </button>
       {open ? (
-        <ScrollArea className={cn("mt-1", MAX_HEIGHT)}>
+        <pre
-          <pre className="whitespace-pre-wrap break-all font-mono text-xs">
+          className={cn(
-            {JSON.stringify(value, null, 2)}
+            "mt-1 overflow-auto whitespace-pre-wrap break-all font-mono text-xs",
-          </pre>
+            MAX_HEIGHT,
-        </ScrollArea>
+          )}
+        >
+          {JSON.stringify(value, null, 2)}
+        </pre>
       ) : null}
     </div>
   )