From 4ba78490a7ff331110d468097781e14071415387 Mon Sep 17 00:00:00 2001 From: Huang Xin Date: Fri, 26 Jun 2026 11:19:04 +0800 Subject: [PATCH] fix(library): prevent series and description overlap in list view (#4796) (#4799) The list-mode book item used a fixed h-28 height. When a book belongs to a series, the title, authors, series, description, and progress row together exceed 112px and overflow, so the series and summary lines collide and get clipped. Larger system font scaling (such as the Android accessibility font size setting) inflates line heights and makes the overlap worse, which is what the reporter saw on a Pixel 10 Pro. Use min-h-28 instead so the row grows to fit its content. Non-series rows keep the same 112px height, and the list is virtualized with measured heights so variable row heights are fine. Co-authored-by: Claude Opus 4.8 (1M context) --- apps/readest-app/src/app/library/components/BookItem.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/readest-app/src/app/library/components/BookItem.tsx b/apps/readest-app/src/app/library/components/BookItem.tsx index 536a6557..8d679a4d 100644 --- a/apps/readest-app/src/app/library/components/BookItem.tsx +++ b/apps/readest-app/src/app/library/components/BookItem.tsx @@ -73,7 +73,7 @@ const BookItem: React.FC = ({ className={clsx( 'book-item flex', mode === 'grid' && 'h-full flex-col justify-end', - mode === 'list' && 'h-28 flex-row gap-4 overflow-hidden', + mode === 'list' && 'min-h-28 flex-row gap-4 overflow-hidden', mode === 'list' ? 'library-list-item' : 'library-grid-item', appService?.hasContextMenu ? 'cursor-pointer' : '', )}