From 882e05955b526889d9d7b3eed5a160c9a3a96580 Mon Sep 17 00:00:00 2001
From: Gmaker689 <1711322114@qq.com>
Date: Mon, 25 May 2026 21:31:27 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=AF=A6=E6=83=85=E5=BC=B9=E7=AA=97?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8=20Portal=20=E6=B8=B2=E6=9F=93=E5=88=B0=20bod?=
 =?UTF-8?q?y=EF=BC=8C=E7=A1=AE=E4=BF=9D=E5=A7=8B=E7=BB=88=E5=B1=85?=
 =?UTF-8?q?=E4=B8=AD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

父级 .page-enter 动画中的 transform 创建了新的 CSS containing block，
导致 position:fixed 相对父级而非视口定位。改用 createPortal 渲染到
document.body 绕过此限制。
---
 frontend/src/components/AssetGallery.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/AssetGallery.tsx b/frontend/src/components/AssetGallery.tsx
index 33bddbc..695e1ec 100644
--- a/frontend/src/components/AssetGallery.tsx
+++ b/frontend/src/components/AssetGallery.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState, useMemo } from 'react'
+import { createPortal } from 'react-dom'
 import { getRecentAssets } from '../api/generate'
 import type { RecentAssetItem } from '../api/types'
 
@@ -40,7 +41,7 @@ function matchCategory(item: RecentAssetItem, cat: string): boolean {
 function DetailModal({ item, onClose }: { item: RecentAssetItem; onClose: () => void }) {
   const downloadUrl = `/api/v1/assets/download?key=${encodeURIComponent(item.key)}`
 
-  return (
+  return createPortal(
     <div
       style={{
         position: 'fixed',
@@ -128,7 +129,8 @@ function DetailModal({ item, onClose }: { item: RecentAssetItem; onClose: () =>
           </button>
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   )
 }