fix modals and publishers list filter zindex

components/ConfirmationModal.tsx

@@ -1,29 +1,29 @@
 import zIndex from "@mui/material/styles/zIndex";
+import ReactDOM from 'react-dom';
 
 export default function ConfirmationModal({ isOpen, onClose, onConfirm, message }) {
   //export default function ConfirmationModal({ isOpen, onClose, onConfirm, message })
   if (!isOpen) return null;
 
-  return (
-    <div className="modal-container opacity-100 inset-0 flex items-center justify-center z-1152" >
+  const modalContent = (
+    <div className="modal-container opacity-100 inset-0 flex items-center justify-center z-1152">
       <div className="bg-white p-4 rounded-md shadow-lg modal-content">
         <p className="mb-4">{message}</p>
-        <button
-          className="bg-red-500 text-white px-4 py-2 rounded mr-2"
-          onClick={onConfirm}
-        >
+        <button className="bg-red-500 text-white px-4 py-2 rounded mr-2" onClick={onConfirm}>
           Потвтрждавам
         </button>
-        <button
-          className="bg-gray-300 px-4 py-2 rounded"
-          onClick={onClose}
-        >
+        <button className="bg-gray-300 px-4 py-2 rounded" onClick={onClose}>
           Отказвам
         </button>
       </div>
       <div className="fixed inset-0 bg-black opacity-50 modal-overlay" onClick={onClose}></div>
     </div>
   );
+
+  return ReactDOM.createPortal(
+    modalContent,
+    document.getElementById('modal-root')
+  );
 };
 // const CustomCalendar = ({ month, year, shifts }) => {
 // export default function CustomCalendar({ date, shifts }: CustomCalendarProps) {