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>
   )