From d94236e1272f10f62db4e0a0e9e0805eb3626821 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Sat, 5 Jul 2025 23:29:33 +0800
Subject: [PATCH] layout: fix grid cover image height in crop mode (#1537)

Support setting arbitrary columns with custom UI css:
```
.bookshelf-items {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}
```
---
 apps/readest-app/src/app/library/components/BookItem.tsx  | 1 +
 apps/readest-app/src/app/library/components/Bookshelf.tsx | 2 +-
 apps/readest-app/src/components/BookCover.tsx             | 2 +-
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/apps/readest-app/src/app/library/components/BookItem.tsx b/apps/readest-app/src/app/library/components/BookItem.tsx
index 0e12424b..42acd803 100644
--- a/apps/readest-app/src/app/library/components/BookItem.tsx
+++ b/apps/readest-app/src/app/library/components/BookItem.tsx
@@ -62,6 +62,7 @@ const BookItem: React.FC<BookItemProps> = ({
       <div
         className={clsx(
           'relative flex aspect-[28/41] items-center justify-center',
+          coverFit === 'crop' && 'overflow-hidden shadow-md',
           mode === 'list' && 'min-w-20',
         )}
       >
diff --git a/apps/readest-app/src/app/library/components/Bookshelf.tsx b/apps/readest-app/src/app/library/components/Bookshelf.tsx
index 0453ed96..1cfc4f6d 100644
--- a/apps/readest-app/src/app/library/components/Bookshelf.tsx
+++ b/apps/readest-app/src/app/library/components/Bookshelf.tsx
@@ -285,7 +285,7 @@ const Bookshelf: React.FC<BookshelfProps> = ({
     <div className='bookshelf'>
       <div
         className={clsx(
-          'transform-wrapper',
+          'bookshelf-items transform-wrapper',
           viewMode === 'grid' && 'grid flex-1 grid-cols-3 gap-x-4 px-4 sm:gap-x-0 sm:px-2',
           viewMode === 'grid' && 'sm:grid-cols-4 md:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-12',
           viewMode === 'list' && 'flex flex-col',
diff --git a/apps/readest-app/src/components/BookCover.tsx b/apps/readest-app/src/components/BookCover.tsx
index 4d199d4a..5742e498 100644
--- a/apps/readest-app/src/components/BookCover.tsx
+++ b/apps/readest-app/src/components/BookCover.tsx
@@ -40,7 +40,7 @@ const BookCover: React.FC<BookCoverProps> = ({
           src={book.coverImageUrl!}
           alt={book.title}
           fill={true}
-          className={clsx('crop-cover-img object-cover shadow-md', imageClassName)}
+          className={clsx('crop-cover-img object-cover', imageClassName)}
           onError={handleImageError}
         />
       ) : (