layout: fix cover image width in fit mode in list view (#1714)

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

@@ -61,9 +61,10 @@ const BookItem: React.FC<BookItemProps> = ({
     >
       <div
         className={clsx(
-          'relative flex items-end justify-center',
-          coverFit === 'crop' && 'aspect-[28/41] overflow-hidden shadow-md',
-          mode === 'list' && 'min-w-20',
+          'relative flex aspect-[28/41] justify-center',
+          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} />

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

@@ -63,46 +63,50 @@ const BookCover: React.FC<BookCoverProps> = memo<BookCoverProps>(
     return (
       <div
         ref={coverRef}
-        className={clsx(
-          'book-cover-container relative flex w-full',
-          coverFit === 'crop' && 'h-full',
-          className,
-        )}
+        className={clsx('book-cover-container relative flex h-full w-full', className)}
       >
         {coverFit === 'crop' ? (
-          <Image
-            src={book.metadata?.coverImageUrl || book.coverImageUrl!}
-            alt={book.title}
-            fill={true}
-            className={clsx('cover-image crop-cover-img object-cover', imageClassName)}
-            onLoad={handleImageLoad}
-            onError={handleImageError}
-          />
-        ) : (
-          <div
-            className={clsx(
-              'flex w-full justify-center',
-              mode === 'grid' ? 'h-full items-end' : 'items-center',
-            )}
-          >
+          <>
             <Image
               src={book.metadata?.coverImageUrl || book.coverImageUrl!}
               alt={book.title}
-              width={0}
-              height={0}
-              sizes='100vw'
-              className={clsx(
-                'cover-image fit-cover-img h-auto max-h-full w-auto max-w-full shadow-md',
-                imageClassName,
-              )}
+              fill={true}
+              className={clsx('cover-image crop-cover-img object-cover', imageClassName)}
               onLoad={handleImageLoad}
               onError={handleImageError}
             />
+            <div
+              className={`book-spine absolute inset-0 ${shouldShowSpine ? 'visible' : 'invisible'}`}
+            />
+          </>
+        ) : (
+          <div
+            className={clsx(
+              'flex h-full w-full justify-center',
+              mode === 'grid' ? 'items-end' : 'items-center',
+            )}
+          >
+            <div className='relative inline-block'>
+              <Image
+                src={book.metadata?.coverImageUrl || book.coverImageUrl!}
+                alt={book.title}
+                width={0}
+                height={0}
+                sizes='100vw'
+                className={clsx(
+                  'cover-image fit-cover-img h-auto max-h-full w-auto max-w-full shadow-md',
+                  imageClassName,
+                )}
+                onLoad={handleImageLoad}
+                onError={handleImageError}
+              />
+              <div
+                className={`book-spine absolute inset-0 ${shouldShowSpine ? 'visible' : 'invisible'}`}
+              />
+            </div>
           </div>
         )}
-        <div
-          className={`book-spine absolute inset-0 ${shouldShowSpine ? 'visible' : 'invisible'}`}
-        />
+
         <div
           className={clsx(
             'fallback-cover invisible absolute inset-0 rounded-none p-2',

apps/readest-app/src/services/webAppService.ts

@@ -51,7 +51,6 @@ const indexedDBFileSystem: FileSystem = {
       const content = await this.readFile(path, base, 'binary');
       return URL.createObjectURL(new Blob([content]));
     } catch {
-      console.warn(`Failed to get Blob URL for path: ${path} in base: ${base}`);
       return path;
     }
   },