From ee201d45716d0dc30776bda455411524c97c0ae1 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Mon, 17 Feb 2025 14:05:18 +0100
Subject: [PATCH] ui: fix alert position in BookDetailModal and toast content
 max width (#390)

---
 .../src/app/library/components/Bookshelf.tsx  |  2 +-
 .../src/components/BookDetailModal.tsx        | 23 ++++++++++++-------
 apps/readest-app/src/components/Toast.tsx     |  3 ++-
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/apps/readest-app/src/app/library/components/Bookshelf.tsx b/apps/readest-app/src/app/library/components/Bookshelf.tsx
index aebfe7e8..8b6ef797 100644
--- a/apps/readest-app/src/app/library/components/Bookshelf.tsx
+++ b/apps/readest-app/src/app/library/components/Bookshelf.tsx
@@ -141,7 +141,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
       <div
         className={clsx(
           'transform-wrapper grid flex-1 gap-x-4 sm:gap-x-0',
-          'grid-cols-3 sm:grid-cols-4 md:grid-cols-6 lg:grid-cols-8',
+          'grid-cols-3 sm:grid-cols-4 md:grid-cols-6 xl:grid-cols-8',
         )}
       >
         {currentBookshelfItems.map((item, index) => (
diff --git a/apps/readest-app/src/components/BookDetailModal.tsx b/apps/readest-app/src/components/BookDetailModal.tsx
index 0b8968bd..f27bc900 100644
--- a/apps/readest-app/src/components/BookDetailModal.tsx
+++ b/apps/readest-app/src/components/BookDetailModal.tsx
@@ -196,14 +196,21 @@ const BookDetailModal = ({ book, isOpen, onClose }: BookDetailModalProps) => {
         </div>
       </Dialog>
       {showDeleteAlert && (
-        <Alert
-          title={_('Confirm Deletion')}
-          message={_('Are you sure to delete the selected books?')}
-          onCancel={() => {
-            setShowDeleteAlert(false);
-          }}
-          onConfirm={confirmDelete}
-        />
+        <div
+          className={clsx(
+            'fixed bottom-0 left-0 right-0 z-50 flex justify-center',
+            'pb-[calc(env(safe-area-inset-bottom)+16px)]',
+          )}
+        >
+          <Alert
+            title={_('Confirm Deletion')}
+            message={_('Are you sure to delete the selected books?')}
+            onCancel={() => {
+              setShowDeleteAlert(false);
+            }}
+            onConfirm={confirmDelete}
+          />
+        </div>
       )}
     </div>
   );
diff --git a/apps/readest-app/src/components/Toast.tsx b/apps/readest-app/src/components/Toast.tsx
index 2890ed3a..d607c5e4 100644
--- a/apps/readest-app/src/components/Toast.tsx
+++ b/apps/readest-app/src/components/Toast.tsx
@@ -64,7 +64,8 @@ export const Toast = () => {
         >
           <span
             className={clsx(
-              'max-h-[50vh] min-w-[30vw] overflow-scroll whitespace-normal break-words text-center',
+              'max-h-[50vh] min-w-[30vw] max-w-80',
+              'overflow-scroll whitespace-normal break-words text-center',
               messageClass.current,
             )}
           >