From e5573a43300ffc9c478a46fc3e5a340b975b564f Mon Sep 17 00:00:00 2001
From: xiaoxia <xiaoxia@xiaoxiajianji.com>
Date: Tue, 25 Aug 2026 11:29:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20FrontendPreviewPlayer=20=E7=94=A8=20rela?=
 =?UTF-8?q?tive=20=E5=AE=B9=E5=99=A8=E5=8C=85=E8=A3=B9=20Fragment=EF=BC=8C?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E7=BB=9D=E5=AF=B9=E5=AE=9A=E4=BD=8D=E5=A4=B1?=
 =?UTF-8?q?=E6=8E=A7?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

return 最外层是 Fragment（<>），没有 position: relative 锚点，
导致内部所有 absolute 元素相对视口定位，预览面板布局溢出。
改为 position:relative + 100%x100% 的 div 包裹。
---
 .../src/pages/generate/components/FrontendPreviewPlayer.tsx   | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
index bf0aa141b..a9424111c 100644
--- a/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
+++ b/apps/web/src/pages/generate/components/FrontendPreviewPlayer.tsx
@@ -343,7 +343,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
   }
 
   return (
-    <>
+    <div style={{ position: "relative", width: "100%", height: "100%" }}>
       {/* ── Canvas 渲染层（WebCodecs 路径） ── */}
       {effectiveUseWebCodecs && (
         <div
@@ -563,7 +563,7 @@ const FrontendPreviewPlayer: React.FC<FrontendPreviewPlayerProps> = ({
           />
         </div>
       </div>
-    </>
+    </div>
   )
 }
 
-- 
2.54.0