From 398f3225dea5e66a464f00a838c1435a2259893f Mon Sep 17 00:00:00 2001
From: HeagBoKaT <egordiki71@gmail.com>
Date: Fri, 29 May 2026 15:49:48 +0300
Subject: [PATCH] Fix modal: use createPortal to render outside transformed
 parent

---
 client/src/components/CatModal.tsx | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/components/CatModal.tsx b/client/src/components/CatModal.tsx
index 59cf368..36b2216 100644
--- a/client/src/components/CatModal.tsx
+++ b/client/src/components/CatModal.tsx
@@ -1,4 +1,5 @@
 import { useEffect, useState, useRef } from 'react';
+import { createPortal } from 'react-dom';
 import { Link } from 'react-router-dom';
 import { useCat, useDeleteCat } from '@/hooks/useCats';
 import { useLikeStatus, useLikeCat, useUnlikeCat } from '@/hooks/useLikes';
@@ -83,13 +84,14 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
   };
 
   if (isLoading || !cat) {
-    return (
+    return createPortal(
       <div className="fixed inset-0 z-[60] bg-black/30 flex items-center justify-center animate-fade-in" onClick={onClose}>
         <div className="flex items-center gap-3 px-5 py-3 bg-white rounded-2xl shadow-lg">
           <div className="h-4 w-4 rounded-full border-2 border-[var(--border)] border-t-[var(--accent)] animate-spin" />
           <span className="text-sm font-medium text-[var(--fg-secondary)]">Загрузка...</span>
         </div>
-      </div>
+      </div>,
+      document.body
     );
   }
 
@@ -97,7 +99,7 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
     year: 'numeric', month: 'long', day: 'numeric', hour: '2-digit', minute: '2-digit',
   });
 
-  return (
+  return createPortal(
     <div className="fixed inset-0 z-[60] bg-black/30 flex items-center justify-center p-4 animate-fade-in" onClick={onClose}>
       <div
         className="w-full max-w-lg bg-white rounded-2xl max-h-[85vh] flex flex-col overflow-hidden shadow-xl animate-scale-in"
@@ -221,6 +223,7 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
           )}
         </div>
       </div>
-    </div>
+    </div>,
+    document.body
   );
 }
\ No newline at end of file