Fix modal: use createPortal to render outside transformed parent

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
   );
 }