ui: fix alert position in BookDetailModal and toast content max width (#390)

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) => (

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>
   );

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,
             )}
           >