From 20d7a1185edf3d8126715bf97468667d2484c7f2 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Tue, 20 May 2025 20:12:17 +0800
Subject: [PATCH] layout: grouping modal now should stay on top of the header
 bar (#1207)

---
 .../src/app/library/components/Bookshelf.tsx  |  5 +++--
 .../app/library/components/GroupingModal.tsx  |  2 +-
 .../src/components/ModalPortal.tsx            | 20 +++++++++++++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)
 create mode 100644 apps/readest-app/src/components/ModalPortal.tsx

diff --git a/apps/readest-app/src/app/library/components/Bookshelf.tsx b/apps/readest-app/src/app/library/components/Bookshelf.tsx
index b4401b80..d31adf7c 100644
--- a/apps/readest-app/src/app/library/components/Bookshelf.tsx
+++ b/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
diff --git a/apps/readest-app/src/app/library/components/GroupingModal.tsx b/apps/readest-app/src/app/library/components/GroupingModal.tsx
index 09975f02..2b8680db 100644
--- a/apps/readest-app/src/app/library/components/GroupingModal.tsx
+++ b/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',
diff --git a/apps/readest-app/src/components/ModalPortal.tsx b/apps/readest-app/src/components/ModalPortal.tsx
new file mode 100644
index 00000000..467a08b5
--- /dev/null
+++ b/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;