From 876386ececb8124560f5e9603c1426132b333677 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Sat, 31 Jan 2026 21:51:35 +0800
Subject: [PATCH] fix: properly center video tutorial modal and fix featured
 image dialog overflow

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 app/(chat)/featured/page.tsx | 10 +++++-----
 components/top-navbar.tsx    | 29 +++++++++++++++++++++--------
 2 files changed, 26 insertions(+), 13 deletions(-)

diff --git a/app/(chat)/featured/page.tsx b/app/(chat)/featured/page.tsx
index 68e1fd1..44dd59d 100644
--- a/app/(chat)/featured/page.tsx
+++ b/app/(chat)/featured/page.tsx
@@ -311,17 +311,17 @@ export default function FeaturedPage() {
 
       {/* 图片预览对话框 */}
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent className="max-w-4xl p-0 overflow-hidden">
+        <DialogContent className="max-w-4xl max-h-[90vh] p-0 overflow-hidden flex flex-col">
           {selectedImage && (
-            <div className="flex flex-col">
+            <div className="flex flex-col max-h-[90vh] overflow-hidden">
               {/* 图片 */}
-              <div className="relative bg-black flex items-center justify-center min-h-[400px] max-h-[70vh]">
+              <div className="relative bg-black flex items-center justify-center min-h-[300px] max-h-[50vh] flex-shrink-0">
                 <Image
                   src={selectedImage.originalUrl}
                   alt={selectedImage.prompt || "精选作品"}
                   width={800}
                   height={600}
-                  className="object-contain max-h-[70vh]"
+                  className="object-contain max-h-[50vh] w-auto"
                   quality={90}
                 />
                 {/* 精选标记 */}
@@ -334,7 +334,7 @@ export default function FeaturedPage() {
               </div>
 
               {/* 信息区域 */}
-              <div className="p-6 bg-white dark:bg-gray-900">
+              <div className="p-6 bg-white dark:bg-gray-900 overflow-y-auto flex-shrink-0">
                 <div className="grid grid-cols-2 gap-4 mb-4">
                   <div className="flex items-center gap-3">
                     <div className="w-10 h-10 rounded-full bg-gradient-to-br from-blue-500 to-purple-500 flex items-center justify-center">
diff --git a/components/top-navbar.tsx b/components/top-navbar.tsx
index 998cb75..77f8515 100644
--- a/components/top-navbar.tsx
+++ b/components/top-navbar.tsx
@@ -450,31 +450,44 @@ export function TopNavbar({
       {/* 功能教程弹窗 - 全屏居中 */}
       {showTutorialModal && currentTutorialVideo && (
         <div 
-          className="fixed top-0 left-0 right-0 bottom-0 z-[9999] flex items-center justify-center bg-black/95"
-          style={{ margin: 0, padding: 0 }}
+          className="fixed inset-0 z-[99999] bg-black/95"
+          style={{ 
+            position: 'fixed',
+            top: 0,
+            left: 0,
+            right: 0,
+            bottom: 0,
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            margin: 0,
+            padding: '20px',
+          }}
           onClick={() => {
             setShowTutorialModal(false);
             setCurrentTutorialVideo(null);
           }}
         >
           <div 
-            className="relative w-[90vw] max-w-[1200px] mx-auto"
+            className="relative w-full max-w-[1200px]"
+            style={{ maxHeight: 'calc(100vh - 40px)' }}
             onClick={(e) => e.stopPropagation()}
           >
-            {/* 关闭按钮 - 右上角 */}
+            {/* 关闭按钮 - 右上角固定 */}
             <button
               onClick={() => {
                 setShowTutorialModal(false);
                 setCurrentTutorialVideo(null);
               }}
-              className="absolute -top-12 right-0 text-white hover:text-gray-300 transition-colors z-10"
-              title="关闭"
+              className="absolute -top-10 right-0 text-white hover:text-red-400 transition-colors z-10"
+              style={{ position: 'absolute', top: '-40px', right: '0' }}
+              title="关闭 (ESC)"
             >
-              <X className="h-10 w-10" />
+              <X className="h-8 w-8" />
             </button>
             
             {/* 标题 */}
-            <h3 className="text-white text-xl font-medium mb-4 text-center">{currentTutorialVideo.title}</h3>
+            <h3 className="text-white text-lg font-medium mb-3 text-center truncate px-4">{currentTutorialVideo.title}</h3>
             
             {/* 视频播放器 */}
             {currentTutorialVideo.videoUrl.includes('youtube.com') || currentTutorialVideo.videoUrl.includes('youtu.be') ? (