From c23b2ccc2e2bb0501a7b9c292e8abe686415483d Mon Sep 17 00:00:00 2001
From: stroblme <stroblme@posteo.de>
Date: Thu, 20 Aug 2026 14:03:00 +0200
Subject: [PATCH] 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 | 23 +++++++++++++------
 1 file changed, 16 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/Flow/ValuePreview.tsx b/frontend/src/components/Flow/ValuePreview.tsx
index 2818895..e80721f 100644
--- a/frontend/src/components/Flow/ValuePreview.tsx
+++ b/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 className="whitespace-pre-wrap break-all font-mono text-xs">
-            {JSON.stringify(value, null, 2)}
-          </pre>
-        </ScrollArea>
+        <pre
+          className={cn(
+            "mt-1 overflow-auto whitespace-pre-wrap break-all font-mono text-xs",
+            MAX_HEIGHT,
+          )}
+        >
+          {JSON.stringify(value, null, 2)}
+        </pre>
       ) : null}
     </div>
   )