From 68c17b16fedc7d05dab734031d4aaac84d209d16 Mon Sep 17 00:00:00 2001
From: HeagBoKaT <egordiki71@gmail.com>
Date: Fri, 29 May 2026 15:51:12 +0300
Subject: [PATCH] Fix avatar picker modal: use createPortal to escape animated
 parent

---
 client/src/pages/ProfilePage.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/client/src/pages/ProfilePage.tsx b/client/src/pages/ProfilePage.tsx
index e4c473e..1dd236d 100644
--- a/client/src/pages/ProfilePage.tsx
+++ b/client/src/pages/ProfilePage.tsx
@@ -1,4 +1,5 @@
 import { useState, useRef, useCallback } from 'react';
+import { createPortal } from 'react-dom';
 import { useParams, Link, useNavigate } from 'react-router-dom';
 import { useAuth } from '@/hooks/useAuth';
 import { useUserCats } from '@/hooks/useCats';
@@ -197,7 +198,7 @@ export default function ProfilePage() {
 
       {modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />}
 
-      {showAvatarPicker && (
+      {showAvatarPicker && createPortal(
         <div className="fixed inset-0 z-[70] bg-black/30 flex items-center justify-center animate-fade-in" onClick={() => setShowAvatarPicker(false)}>
           <div className="bg-white rounded-2xl w-full max-w-sm p-5 shadow-xl animate-scale-in mx-4" onClick={e => e.stopPropagation()}>
             <div className="flex items-center justify-between mb-5">
@@ -234,7 +235,8 @@ export default function ProfilePage() {
               </Button>
             </div>
           </div>
-        </div>
+        </div>,
+        document.body
       )}
 
       <input type="file" ref={fileInputRef} onChange={onFileChange} accept="image/*" className="hidden" />