compat(layout): grid layout with fit covers on older browsers, closes #2745 (#2756)

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

@@ -61,13 +61,19 @@ const BookItem: React.FC<BookItemProps> = ({
     >
       <div
         className={clsx(
-          'relative flex aspect-[28/41] justify-center',
+          'relative flex aspect-[28/41] justify-center rounded',
           coverFit === 'crop' && 'overflow-hidden shadow-md',
           mode === 'grid' && 'items-end',
           mode === 'list' && 'min-w-20 items-center',
         )}
       >
-        <BookCover mode={mode} book={book} coverFit={coverFit} showSpine={false} />
+        <BookCover
+          mode={mode}
+          book={book}
+          coverFit={coverFit}
+          showSpine={false}
+          imageClassName='rounded shadow-md'
+        />
         {bookSelected && (
           <div className='absolute inset-0 bg-black opacity-30 transition-opacity duration-300'></div>
         )}

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

@@ -99,7 +99,7 @@ const GroupItem: React.FC<GroupItemProps> = ({ mode, group, isSelectMode, groupS
     <div className={clsx('group-item', appService?.hasContextMenu ? 'cursor-pointer' : '')}>
       <div
         className={clsx(
-          'relative flex overflow-hidden',
+          'relative flex overflow-hidden rounded',
           mode === 'grid' && 'bg-base-100 aspect-[28/41] items-center justify-center shadow-md',
           mode === 'list' && 'items-center justify-start gap-4 py-2',
         )}
@@ -139,7 +139,7 @@ const GroupItem: React.FC<GroupItemProps> = ({ mode, group, isSelectMode, groupS
                   mode === 'list' && 'flex-shrink-0',
                 )}
               >
-                <BookCover book={book} isPreview />
+                <BookCover book={book} isPreview imageClassName='rounded-[2px]' />
               </div>
             ))}
           </div>

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

@@ -102,6 +102,7 @@ const GroupingModal: React.FC<GroupingModalProps> = ({
     setShowInput(true);
     setIsRenaming(false);
     setOriginalGroupName(null);
+    setSelectedGroup(null);
   };
 
   const handleRenameGroup = () => {

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

@@ -83,13 +83,13 @@ const BookCover: React.FC<BookCoverProps> = memo<BookCoverProps>(
             />
           </>
         ) : (
-          <div
-            className={clsx(
-              'flex h-full w-full justify-center',
-              mode === 'grid' ? 'items-end' : 'items-center',
-            )}
-          >
-            <div className='relative inline-block'>
+          <div className={clsx('flex h-full w-full justify-start')}>
+            <div
+              className={clsx(
+                'flex h-full max-h-full items-end',
+                mode === 'grid' ? 'items-end' : 'items-center',
+              )}
+            >
               <Image
                 src={book.metadata?.coverImageUrl || book.coverImageUrl!}
                 alt={book.title}
@@ -112,9 +112,10 @@ const BookCover: React.FC<BookCoverProps> = memo<BookCoverProps>(
 
         <div
           className={clsx(
-            'fallback-cover invisible absolute inset-0 rounded-none p-2',
+            'fallback-cover invisible absolute inset-0 p-2',
             'text-neutral-content text-center font-serif font-medium',
             isPreview ? 'bg-base-200/50' : 'bg-base-100',
+            imageClassName,
           )}
         >
           <div className='flex h-1/2 items-center justify-center'>