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 (
+  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
+        <button className="bg-red-500 text-white px-4 py-2 rounded mr-2" onClick={onConfirm}>
-          className="bg-red-500 text-white px-4 py-2 rounded mr-2"
-          onClick={onConfirm}
-        >
           Потвтрждавам
         </button>
-        <button
+        <button className="bg-gray-300 px-4 py-2 rounded" onClick={onClose}>
-          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) {

components/layout.tsx

@@ -63,6 +63,7 @@ export default function Layout({ children }) {
             <div className="">
               {children}
             </div>
+            <div id="modal-root"></div>  {/* Modal container */}
           </main>
         </div>
       </div>

components/publisher/PublisherSearchBox.js

@@ -127,7 +127,7 @@ function PublisherSearchBox({ id, selectedId, onChange, isFocused, filterDate, s
             ) : null}
             {showList ? (
                 // Display only clickable list of all publishers
-                <ul className="absolute bg-white border border-gray-300 w-full z-10">
+                <ul className="absolute bg-white border border-gray-300 w-full z-10 overflow-y-auto">
                     {publishers.map((publisher) => (
                         <li key={publisher.id}
                             className="p-2 cursor-pointer hover:bg-gray-200"
@@ -136,7 +136,8 @@ function PublisherSearchBox({ id, selectedId, onChange, isFocused, filterDate, s
                         </li>
                     ))}
                 </ul>
-            ) : null}
+            ) : null
+            }
         </div >
     );
 }

pages/cart/publishers/index.tsx

@@ -14,6 +14,7 @@ import toast from "react-hot-toast";
 import { levenshteinEditDistance } from "levenshtein-edit-distance";
 import ProtectedRoute from '../../../components/protectedRoute';
 import ConfirmationModal from '../../../components/ConfirmationModal';
+import { relative } from "path";
 
 
 
@@ -165,7 +166,7 @@ function PublishersPage({ publishers = [] }: IProps) {
   return (
     <Layout>
       <ProtectedRoute allowedRoles={[UserRole.ADMIN, UserRole.POWERUSER]}>
-        <div className="">
+        <div className="mx-auto ">
           <div className="flex items-center justify-center space-x-4 m-4">
             <div className="flex justify-center m-4">
               <a href="/cart/publishers/new" className="btn">Добави вестител</a>
@@ -196,7 +197,8 @@ function PublishersPage({ publishers = [] }: IProps) {
             </div>
           </div>
 
-          <div name="filters" className="flex items-center justify-center space-x-4 m-4 sticky top-4 z-10 bg-gray-100 p-2">
+          <div className="z-60 sticky top-0" style={{ zIndex: 60, position: relative }}>
+            <div name="filters" className="flex items-center justify-center space-x-4 m-4 bg-gray-100 p-2" >
               <label htmlFor="filter">Filter:</label>
               <input type="text" id="filter" name="filter" value={filter} onChange={handleFilterChange}
                 className="border border-gray-300 rounded-md px-2 py-1"
@@ -212,7 +214,7 @@ function PublishersPage({ publishers = [] }: IProps) {
 
               <span id="filter-info" className="ml-4">{publishers.length} от {publishers.length} вестителя</span>
             </div>
-
+          </div>
           <div className="grid gap-4 grid-cols-1 md:grid-cols-4 z-0">
             {renderPublishers()}
           </div>