From 47c6d6d0584362082fe9f7aa9e43575bf7370958 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Wed, 30 Jul 2025 17:29:31 +0800
Subject: [PATCH] layout: fix cover image width in fit mode in list view
 (#1714)

---
 .../src/app/library/components/BookItem.tsx   |  7 +-
 apps/readest-app/src/components/BookCover.tsx | 64 ++++++++++---------
 .../readest-app/src/services/webAppService.ts |  1 -
 3 files changed, 38 insertions(+), 34 deletions(-)

diff --git a/apps/readest-app/src/app/library/components/BookItem.tsx b/apps/readest-app/src/app/library/components/BookItem.tsx
index 1d61c0b7..87f17f03 100644
--- a/apps/readest-app/src/app/library/components/BookItem.tsx
+++ b/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} />
diff --git a/apps/readest-app/src/components/BookCover.tsx b/apps/readest-app/src/components/BookCover.tsx
index 9cfbe239..8a9eee45 100644
--- a/apps/readest-app/src/components/BookCover.tsx
+++ b/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',
diff --git a/apps/readest-app/src/services/webAppService.ts b/apps/readest-app/src/services/webAppService.ts
index da7ff24e..f7c750f4 100644
--- a/apps/readest-app/src/services/webAppService.ts
+++ b/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;
     }
   },