From de3caf880ae99fecb69ff88a0d007e6c02cf42dc Mon Sep 17 00:00:00 2001
From: denis0001-dev <denis0001.dev@ya.ru>
Date: Thu, 2 Oct 2025 21:27:14 +0300
Subject: [PATCH] Portal the fullscreen viewer to avoid issues

---
 frontend/src/pages/app/ui/components/chat/Message.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/frontend/src/pages/app/ui/components/chat/Message.tsx b/frontend/src/pages/app/ui/components/chat/Message.tsx
index 5750f01..ba555ff 100644
--- a/frontend/src/pages/app/ui/components/chat/Message.tsx
+++ b/frontend/src/pages/app/ui/components/chat/Message.tsx
@@ -1,4 +1,4 @@
-import { formatTime } from "../../../utils/utils";
+import { formatTime, id } from "../../../utils/utils";
 import type { Attachment, Message as MessageType } from "../../../core/types";
 import defaultAvatar from "../../../resources/images/default-avatar.png";
 import Quote from "../core/Quote";
@@ -12,6 +12,7 @@ import { getAuthHeaders } from "../../../auth/api";
 import { useAppState } from "../../state";
 import { ub64 } from "../../../utils/utils";
 import { useImmer } from "use-immer";
+import { createPortal } from "react-dom";
 
 interface MessageProps {
     message: MessageType;
@@ -398,7 +399,7 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
             </div>
 
             {/* Fullscreen Image Viewer with shared-element like transition */}
-            {fullscreenImage && (
+            {fullscreenImage && createPortal(
                 <div 
                     className={`fullscreen-image-overlay ${isAnimatingOpen ? "open" : "closing"}`}
                     onClick={closeFullscreen}>
@@ -424,7 +425,8 @@ export function Message({ message, isAuthor, onProfileClick, onContextMenu, isLo
                             <mdui-button-icon icon="download" onClick={downloadImage} />
                         )}
                     </div>
-                </div>
+                </div>,
+                id("root")
             )}
         </>
     );