layout: grouping modal now should stay on top of the header bar (#1207)

apps/readest-app/src/app/library/components/Bookshelf.tsx

@@ -17,6 +17,7 @@ import { isMd5 } from '@/utils/md5';
 
 import Alert from '@/components/Alert';
 import Spinner from '@/components/Spinner';
+import ModalPortal from '@/components/ModalPortal';
 import BookshelfItem, { generateGridItems, generateListItems } from './BookshelfItem';
 import GroupingModal from './GroupingModal';
 
@@ -354,7 +355,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
         )}
       </div>
       {showGroupingModal && (
-        <div>
+        <ModalPortal>
           <GroupingModal
             libraryBooks={libraryBooks}
             selectedBooks={selectedBooks}
@@ -367,7 +368,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
               handleSetSelectMode(false);
             }}
           />
-        </div>
+        </ModalPortal>
       )}
       {showDeleteAlert && (
         <div

apps/readest-app/src/app/library/components/GroupingModal.tsx

@@ -140,7 +140,7 @@ const GroupingModal: React.FC<GroupingModalProps> = ({
   }, [selectedBooks]);
 
   return (
-    <div className='fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50'>
+    <div className='fixed inset-0 flex items-center justify-center'>
       <div
         className={clsx(
           'modal-box bg-base-100 overflow-y-auto rounded-2xl shadow-xl',

apps/readest-app/src/components/ModalPortal.tsx

@@ -0,0 +1,20 @@
+import React, { ReactNode } from 'react';
+import ReactDOM from 'react-dom';
+
+interface ModalPortalProps {
+  children: ReactNode;
+}
+
+const ModalPortal: React.FC<ModalPortalProps> = ({ children }) => {
+  return ReactDOM.createPortal(
+    <div
+      className='fixed inset-0 isolate z-50 flex items-center justify-center bg-black bg-opacity-50'
+      style={{ transform: 'translateZ(0)' }}
+    >
+      {children}
+    </div>,
+    document.body,
+  );
+};
+
+export default ModalPortal;