HeagBoKaT/cats
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix avatar picker modal: use createPortal to escape animated parent

Browse Source
This commit is contained in:
HeagBoKaT
2026-05-29 15:51:12 +03:00
parent 398f3225de
commit 68c17b16fe
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/src/pages/ProfilePage.tsx
View File

@@ -1,4 +1,5 @@
import { useState, useRef, useCallback } from 'react'; import { useState, useRef, useCallback } from 'react';
import { createPortal } from 'react-dom';
import { useParams, Link, useNavigate } from 'react-router-dom'; import { useParams, Link, useNavigate } from 'react-router-dom';
import { useAuth } from '@/hooks/useAuth'; import { useAuth } from '@/hooks/useAuth';
import { useUserCats } from '@/hooks/useCats'; import { useUserCats } from '@/hooks/useCats';
@@ -197,7 +198,7 @@ export default function ProfilePage() {
{modalCatId && <CatModal catId={modalCatId} onClose={() => setModalCatId(null)} />} {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="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="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"> <div className="flex items-center justify-between mb-5">
@@ -234,7 +235,8 @@ export default function ProfilePage() {
</Button> </Button>
</div> </div>
</div> </div>
</div> </div>,
document.body
)} )}
<input type="file" ref={fileInputRef} onChange={onFileChange} accept="image/*" className="hidden" /> <input type="file" ref={fileInputRef} onChange={onFileChange} accept="image/*" className="hidden" />