From f352dbdffacaead5ba5d4455de477d153556216c Mon Sep 17 00:00:00 2001
From: chenhang <averych@126.com>
Date: Tue, 30 Jun 2026 10:58:57 +0800
Subject: [PATCH] fix(chat): constrain image viewer width

---
 .../fullscreen-image-viewer.module.css        |  2 +-
 .../components/fullscreen-image-viewer.tsx    |  2 +-
 .../[messageId]/chat-image-viewer-screen.tsx  | 37 ++++++++++++-------
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/app/chat/components/fullscreen-image-viewer.module.css b/src/app/chat/components/fullscreen-image-viewer.module.css
index 9bd2beaf..08aa5c9a 100644
--- a/src/app/chat/components/fullscreen-image-viewer.module.css
+++ b/src/app/chat/components/fullscreen-image-viewer.module.css
@@ -1,7 +1,7 @@
 /* FullscreenImageViewer 全屏图片查看器样式 */
 
 .viewer {
-  position: fixed;
+  position: absolute;
   inset: 0;
   z-index: 100;
   background: #000;
diff --git a/src/app/chat/components/fullscreen-image-viewer.tsx b/src/app/chat/components/fullscreen-image-viewer.tsx
index b459f1ea..3b4d8088 100644
--- a/src/app/chat/components/fullscreen-image-viewer.tsx
+++ b/src/app/chat/components/fullscreen-image-viewer.tsx
@@ -51,7 +51,7 @@ export function FullscreenImageViewer({
           src={src}
           alt=""
           fill
-          sizes="100vw"
+          sizes="(max-width: 540px) 100vw, 540px"
           className={styles.paywallImage}
         />
         <div className={styles.paywallScrim} aria-hidden="true" />
diff --git a/src/app/chat/image/[messageId]/chat-image-viewer-screen.tsx b/src/app/chat/image/[messageId]/chat-image-viewer-screen.tsx
index d4c0223b..847ffa57 100644
--- a/src/app/chat/image/[messageId]/chat-image-viewer-screen.tsx
+++ b/src/app/chat/image/[messageId]/chat-image-viewer-screen.tsx
@@ -2,6 +2,7 @@
 
 import { useRouter } from "next/navigation";
 
+import { MobileShell } from "@/app/_components/core";
 import { ROUTE_BUILDERS, ROUTES } from "@/router/routes";
 import { useAuthState } from "@/stores/auth/auth-context";
 import { useChatDispatch, useChatState } from "@/stores/chat/chat-context";
@@ -40,25 +41,33 @@ export function ChatImageViewerScreen({
 
   if (!message) {
     return (
-      <main className={styles.emptyScreen}>
-        <button type="button" className={styles.backButton} onClick={handleClose}>
-          Back to chat
-        </button>
-        <p className={styles.emptyText}>
-          {chatState.historyLoaded ? "Image not found." : "Loading image..."}
-        </p>
-      </main>
+      <MobileShell background="#0d0b14">
+        <main className={styles.emptyScreen}>
+          <button
+            type="button"
+            className={styles.backButton}
+            onClick={handleClose}
+          >
+            Back to chat
+          </button>
+          <p className={styles.emptyText}>
+            {chatState.historyLoaded ? "Image not found." : "Loading image..."}
+          </p>
+        </main>
+      </MobileShell>
     );
   }
 
   return (
     <>
-      <FullscreenImageViewer
-        imageUrl={message.imageUrl ?? ""}
-        imagePaywalled={message.imagePaywalled === true}
-        onUnlockImagePaywall={handleUnlockImagePaywall}
-        onClose={handleClose}
-      />
+      <MobileShell background="#000000">
+        <FullscreenImageViewer
+          imageUrl={message.imageUrl ?? ""}
+          imagePaywalled={message.imagePaywalled === true}
+          onUnlockImagePaywall={handleUnlockImagePaywall}
+          onClose={handleClose}
+        />
+      </MobileShell>
       <HistoryUnlockDialog
         open={chatState.unlockHistoryPromptVisible}
         lockedCount={chatState.lockedHistoryCount}