4.14.1: Исправлен z-index модальных окон

VERSION

@@ -1 +1 @@
-4.14.0
+4.14.1

play-life-web/package.json

@@ -1,6 +1,6 @@
 {
   "name": "play-life-web",
-  "version": "4.14.0",
+  "version": "4.14.1",
   "type": "module",
   "scripts": {
     "dev": "vite",

play-life-web/src/components/TaskDetail.css

@@ -1,6 +1,6 @@
 /* Модальное окно */
 .task-detail-modal-overlay {
-  position: fixed;
+  position: fixed !important;
   top: 0;
   left: 0;
   right: 0;
@@ -9,7 +9,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1700;
+  z-index: 9999 !important;
   padding: 1rem;
 }
 

play-life-web/src/components/TaskDetail.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback, useMemo, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { useAuth } from './auth/AuthContext'
 import LoadingError from './LoadingError'
 import Toast from './Toast'
@@ -727,7 +728,7 @@ function TaskDetail({ taskId, onClose, onRefresh, onTaskCompleted, onNavigate })
 
 
 
-  return (
+  const modalContent = (
     <div className="task-detail-modal-overlay" onClick={onClose}>
       <div className="task-detail-modal" onClick={(e) => e.stopPropagation()}>
         <div className="task-detail-modal-header">
@@ -920,6 +921,10 @@ function TaskDetail({ taskId, onClose, onRefresh, onTaskCompleted, onNavigate })
     </div>
   </div>
   )
+
+  return typeof document !== 'undefined'
+    ? createPortal(modalContent, document.body)
+    : modalContent
 }
 
 export default TaskDetail

play-life-web/src/components/TaskList.css

@@ -286,7 +286,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 50;
+  z-index: 1000;
 }
 
 .task-postpone-modal {
@@ -451,7 +451,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 50;
+  z-index: 1000;
 }
 
 .task-modal {
@@ -644,7 +644,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 50;
+  z-index: 1000;
 }
 
 .task-add-modal {

play-life-web/src/components/WishlistDetail.css

@@ -1,6 +1,6 @@
 /* Модальное окно */
 .wishlist-detail-modal-overlay {
-  position: fixed;
+  position: fixed !important;
   top: 0;
   left: 0;
   right: 0;
@@ -9,7 +9,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  z-index: 1700;
+  z-index: 9999 !important;
   padding: 1rem;
 }
 

play-life-web/src/components/WishlistDetail.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect, useCallback, useRef } from 'react'
+import { createPortal } from 'react-dom'
 import { useAuth } from './auth/AuthContext'
 import TaskDetail from './TaskDetail'
 import LoadingError from './LoadingError'
@@ -405,7 +406,7 @@ function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId, onClose, p
   }
 
 
-  return (
+  const modalContent = (
     <div className="wishlist-detail-modal-overlay" onClick={handleClose}>
       <div className="wishlist-detail-modal" onClick={(e) => e.stopPropagation()}>
         <div className="wishlist-detail-modal-header">
@@ -648,6 +649,10 @@ function WishlistDetail({ wishlistId, onNavigate, onRefresh, boardId, onClose, p
       </div>
     </div>
   )
+
+  return typeof document !== 'undefined'
+    ? createPortal(modalContent, document.body)
+    : modalContent
 }
 
 export default WishlistDetail