fix(chat): constrain image viewer width

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;

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" />

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}>
+      <MobileShell background="#0d0b14">
-        <button type="button" className={styles.backButton} onClick={handleClose}>
+        <main className={styles.emptyScreen}>
-          Back to chat
+          <button
-        </button>
+            type="button"
-        <p className={styles.emptyText}>
+            className={styles.backButton}
-          {chatState.historyLoaded ? "Image not found." : "Loading image..."}
+            onClick={handleClose}
-        </p>
+          >
-      </main>
+            Back to chat
+          </button>
+          <p className={styles.emptyText}>
+            {chatState.historyLoaded ? "Image not found." : "Loading image..."}
+          </p>
+        </main>
+      </MobileShell>
     );
   }
 
   return (
     <>
-      <FullscreenImageViewer
+      <MobileShell background="#000000">
-        imageUrl={message.imageUrl ?? ""}
+        <FullscreenImageViewer
-        imagePaywalled={message.imagePaywalled === true}
+          imageUrl={message.imageUrl ?? ""}
-        onUnlockImagePaywall={handleUnlockImagePaywall}
+          imagePaywalled={message.imagePaywalled === true}
-        onClose={handleClose}
+          onUnlockImagePaywall={handleUnlockImagePaywall}
-      />
+          onClose={handleClose}
+        />
+      </MobileShell>
       <HistoryUnlockDialog
         open={chatState.unlockHistoryPromptVisible}
         lockedCount={chatState.lockedHistoryCount}