From cbbe1da82530937b09d7e62b49b00947f8b78bd4 Mon Sep 17 00:00:00 2001
From: amosblomqvist <amosblomqvist@gmail.com>
Date: Tue, 6 Oct 2026 04:31:48 +0300
Subject: [PATCH] =?UTF-8?q?practice:=20the=20metadata=20box=20rides=20a=20?=
 =?UTF-8?q?body=20portal=20=E2=80=94=20never=20clipped=20again=20(round=20?=
 =?UTF-8?q?17=20fix)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Diagnosed: the transcript's MessageContent boxes carry overflow-hidden
(ai-elements/message.tsx) — the absolutely-positioned box rendered fine
over its own message block's content (the closing-words text under the
conclude card) and clipped the moment it crossed that block's bottom
edge onto the next message. Exactly the reported cut-off.

Fix: the box portals to document.body in fixed position (the dialogs'
law) — placed from the trigger's viewport rect at open time, below the
trigger, left-clamped to the viewport; z-50. Any-scroll-close means
there is nothing to track.
---
 components/practice-cards.tsx | 47 +++++++++++++++++++++++++++--------
 1 file changed, 37 insertions(+), 10 deletions(-)

diff --git a/components/practice-cards.tsx b/components/practice-cards.tsx
index 45f6381..cff604c 100644
--- a/components/practice-cards.tsx
+++ b/components/practice-cards.tsx
@@ -21,6 +21,7 @@ import type { ArtifactPartProps } from "@/src/core";
  */
 
 import { useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 
 import { ThinkingBlock } from "@/components/thinking-block";
 import { usePopoverDismiss } from "@/components/popover-dismiss";
@@ -177,7 +178,12 @@ function MetadataPopover({
 	problemInput: { mode?: unknown; target?: unknown };
 }) {
 	const [open, setOpen] = useState(false);
+	const triggerRef = useRef<HTMLButtonElement | null>(null);
 	const rootRef = useRef<HTMLDivElement | null>(null);
+	// The portal's anchor (owner fix, 2026-10-06): the box is placed from
+	// the trigger's viewport rect AT OPEN TIME — any scroll closes the
+	// box, so there is nothing to track.
+	const [anchor, setAnchor] = useState<{ top: number; left: number } | null>(null);
 	const [names, setNames] = useState<Record<string, string> | null>(null);
 	const targets = Array.isArray(problemInput.target)
 		? problemInput.target.filter((t): t is string => typeof t === "string")
@@ -216,19 +222,39 @@ function MetadataPopover({
 			<button
 				type="button"
 				data-testid="metadata-toggle"
-				onClick={() => setOpen((v) => !v)}
+				ref={triggerRef}
+				onClick={() => {
+					setOpen((v) => {
+						if (v) return false;
+						const r = triggerRef.current?.getBoundingClientRect();
+						if (r) {
+							// Below the trigger, always; clamped so the 320px box
+							// never leaves the viewport's right edge.
+							const left = Math.max(8, Math.min(r.left, window.innerWidth - 328));
+							setAnchor({ top: r.bottom + 8, left });
+						}
+						return true;
+					});
+				}}
 				aria-expanded={open}
 				className="flex items-center gap-1 text-xs font-medium uppercase tracking-wide text-muted-foreground transition-colors hover:text-foreground"
 			>
 				Metadata
 			</button>
-			{open && (
-				<div
-					data-testid="metadata-box"
-					// The node-card info-box register (graph view), floating above
-					// the trigger — never clipped by the transcript scroller.
-					className="absolute top-full left-0 z-20 mt-2 w-80 max-w-[calc(100%-1rem)] rounded-xl border bg-card p-4 text-left shadow-lg"
-				>
+			{open &&
+				anchor &&
+				createPortal(
+					<div
+						data-testid="metadata-box"
+						// PORTALED TO BODY (owner fix, 2026-10-06): the transcript's
+						// MessageContent boxes carry overflow-hidden — an absolutely
+						// positioned child clips at its own message block's edge (the
+						// cut-off bug). A fixed-position portal sits on top of
+						// EVERYTHING, the dialogs' law. Node-card info-box register;
+						// opening BELOW the trigger — always.
+						style={{ position: "fixed", top: anchor.top, left: anchor.left }}
+						className="z-50 w-80 max-w-[calc(100vw-1rem)] rounded-xl border bg-card p-4 text-left shadow-lg"
+					>
 				<dl className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1 text-xs">
 						<dt className="text-muted-foreground">Mode</dt>
 						<dd className="font-mono">{mode || "—"}</dd>
@@ -256,8 +282,9 @@ function MetadataPopover({
 						<dt className="text-muted-foreground">Retest</dt>
 						<dd className="font-mono">{retest === undefined ? "—" : retest ? "yes" : "no"}</dd>
 					</dl>
-				</div>
-			)}
+					</div>,
+					document.body,
+				)}
 		</div>
 	);
 }