Fix modal: simple flex center, remove body position hacks
This commit is contained in:
@@ -34,18 +34,8 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
useEffect(() => { if (likeData) setLiked(likeData.liked); }, [likeData]);
|
||||
useEffect(() => { if (data?.cat) setLikeCount(data.cat.likes_count); }, [data]);
|
||||
useEffect(() => {
|
||||
const scrollY = window.scrollY;
|
||||
document.documentElement.style.overflow = 'hidden';
|
||||
document.documentElement.style.height = '100%';
|
||||
document.body.style.overflow = 'hidden';
|
||||
document.body.style.height = '100%';
|
||||
return () => {
|
||||
document.documentElement.style.overflow = '';
|
||||
document.documentElement.style.height = '';
|
||||
document.body.style.overflow = '';
|
||||
document.body.style.height = '';
|
||||
window.scrollTo(0, scrollY);
|
||||
};
|
||||
return () => { document.body.style.overflow = ''; };
|
||||
}, []);
|
||||
useEffect(() => {
|
||||
const h = (e: KeyboardEvent) => { if (e.key === 'Escape') onClose(); };
|
||||
@@ -108,9 +98,9 @@ export default function CatModal({ catId, onClose }: CatModalProps) {
|
||||
});
|
||||
|
||||
return (
|
||||
<div className="fixed inset-0 z-[60] bg-black/30 overflow-y-auto animate-fade-in" onClick={onClose}>
|
||||
<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-[90vh] flex flex-col overflow-hidden shadow-xl animate-scale-in mx-auto mt-[50vh] -translate-y-1/2"
|
||||
className="w-full max-w-lg bg-white rounded-2xl max-h-[85vh] flex flex-col overflow-hidden shadow-xl animate-scale-in"
|
||||
onClick={e => e.stopPropagation()}
|
||||
>
|
||||
<div className="flex items-center justify-between px-5 py-4 shrink-0">
|
||||
|
||||
Reference in New Issue
Block a user