From 1064c784d4012dc270dfe31b70ee919e89684cfe Mon Sep 17 00:00:00 2001
From: root <root@opencode.lan>
Date: Mon, 13 Apr 2026 10:32:51 +0500
Subject: [PATCH] fix: clamp hero carousel card height to cover aspect ratio,
 prevent text overflow

---
 ui/src/routes/+page.svelte | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/ui/src/routes/+page.svelte b/ui/src/routes/+page.svelte
index b07f461..f77777d 100644
--- a/ui/src/routes/+page.svelte
+++ b/ui/src/routes/+page.svelte
@@ -145,9 +145,9 @@
 			ontouchstart={onSwipeStart}
 			ontouchend={onSwipeEnd}
 		>
-			<!-- Cover -->
+			<!-- Cover — drives card height via aspect-[2/3] -->
 			<a href="/books/{heroBook.book.slug}/chapters/{heroBook.chapter}"
-				class="w-32 sm:w-44 shrink-0 aspect-[2/3] overflow-hidden block">
+				class="w-32 sm:w-44 shrink-0 self-stretch overflow-hidden block">
 				{#if heroBook.book.cover}
 					{#key heroIndex}
 						<img src={heroBook.book.cover} alt={heroBook.book.title}
@@ -162,19 +162,20 @@
 				{/if}
 			</a>
 
-			<!-- Info -->
-			<div class="flex flex-col justify-between p-5 sm:p-7 min-w-0 flex-1">
-				<div>
+			<!-- Info — fixed height matching cover, overflow hidden so text never expands the card -->
+			<div class="flex flex-col justify-between p-5 sm:p-7 min-w-0 flex-1 overflow-hidden
+				h-[calc(128px*3/2)] sm:h-[calc(176px*3/2)]">
+				<div class="min-h-0 overflow-hidden">
 					<p class="text-xs font-semibold text-(--color-brand) uppercase tracking-widest mb-2">{m.home_continue_reading()}</p>
 					<h2 class="text-xl sm:text-2xl font-bold text-(--color-text) leading-snug line-clamp-2 mb-1">{heroBook.book.title}</h2>
 					{#if heroBook.book.author}
-						<p class="text-sm text-(--color-muted)">{heroBook.book.author}</p>
+						<p class="text-sm text-(--color-muted) truncate">{heroBook.book.author}</p>
 					{/if}
 					{#if heroBook.book.summary}
-						<p class="hidden sm:block text-sm text-(--color-muted) mt-3 line-clamp-2 max-w-prose">{heroBook.book.summary}</p>
+						<p class="hidden sm:block text-sm text-(--color-muted) mt-3 line-clamp-3 max-w-prose">{heroBook.book.summary}</p>
 					{/if}
 				</div>
-				<div class="flex items-center gap-3 mt-4 flex-wrap">
+				<div class="flex items-center gap-3 mt-4 flex-wrap shrink-0">
 					<a href="/books/{heroBook.book.slug}/chapters/{heroBook.chapter}"
 						class="inline-flex items-center gap-1.5 px-4 py-2 rounded-lg bg-(--color-brand) text-(--color-surface) font-semibold text-sm hover:bg-(--color-brand-dim) transition-colors">
 						<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>