Commit dc5de128 by luoqi

fix(web): artifact 放大窗 portal 到 body — 小窗 transform 祖先把 fixed 圈住致其困在助手窗内

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
parent 9dc2093f
'use client';
import { useEffect, useMemo, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import {
......@@ -349,8 +350,12 @@ function ArtifactView({ artifact }: { artifact: Artifact }) {
</div>
<ArtifactFrame artifact={artifact} autoHeight />
{/* 居中放大窗:与内联卡同源同流(streaming 时这里同步在"长") */}
{expanded && (
{/* 居中放大窗:与内联卡同源同流(streaming 时这里同步在"长")。
⚠️ portal 到 body —— 助手小窗容器带 transform(滑出动画),CSS 规定 transform 祖先
会把后代 fixed 圈进自己坐标系 → 不 portal 大窗就被困在小窗里(2026-06 实测)。 */}
{expanded &&
typeof document !== 'undefined' &&
createPortal(
<div className="fixed inset-0 z-[70] flex items-center justify-center p-4">
<div className="absolute inset-0 bg-black/40" onClick={() => setExpanded(false)} />
<div className="relative z-10 flex h-[min(86vh,920px)] w-[min(980px,94vw)] flex-col overflow-hidden rounded-xl border border-slate-200 bg-white shadow-2xl">
......@@ -382,7 +387,8 @@ function ArtifactView({ artifact }: { artifact: Artifact }) {
</div>
<ArtifactFrame artifact={artifact} autoHeight={false} className="min-h-0 flex-1" />
</div>
</div>
</div>,
document.body,
)}
</div>
);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment