From 150eb2a2afc58676aeb07d1bca6e93a717624718 Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Sun, 5 Apr 2026 23:11:49 +0500
Subject: [PATCH] fix(book): move description to full-width section below
 header

The description was crammed into the narrow right column beside the cover,
creating a wall of text on mobile. Now it renders full-width below the
cover+title row with better line-height, 5-line collapse, gradient fade,
and a chevron-annotated show-more button.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 ui/src/routes/books/[slug]/+page.svelte | 44 ++++++++++++++++---------
 1 file changed, 28 insertions(+), 16 deletions(-)

diff --git a/ui/src/routes/books/[slug]/+page.svelte b/ui/src/routes/books/[slug]/+page.svelte
index a157431..f29c407 100644
--- a/ui/src/routes/books/[slug]/+page.svelte
+++ b/ui/src/routes/books/[slug]/+page.svelte
@@ -633,22 +633,6 @@
 					{/if}
 				</div>
 
-				<!-- Summary with expand toggle -->
-				{#if book.summary}
-					<div class="mt-1">
-						<p class="text-(--color-muted) text-sm leading-relaxed break-words {summaryExpanded ? '' : 'line-clamp-3'}">
-							{book.summary}
-						</p>
-						{#if book.summary.length > 220}
-							<button
-								onclick={() => (summaryExpanded = !summaryExpanded)}
-								class="text-xs text-(--color-brand)/70 hover:text-(--color-brand) mt-1 transition-colors"
-							>
-								{summaryExpanded ? m.book_detail_less() : m.book_detail_more()}
-							</button>
-						{/if}
-					</div>
-				{/if}
 
 				<!-- CTA buttons — desktop only -->
 				<div class="hidden sm:flex gap-2 mt-3 items-center flex-wrap">
@@ -825,6 +809,34 @@
 	</div>
 </div>
 
+<!-- ── Book description ──────────────────────────────────────────────────────── -->
+{#if book.summary}
+<div class="mb-6">
+	<div class="relative">
+		<p
+			class="text-(--color-muted) text-sm leading-7 break-words whitespace-pre-line {summaryExpanded ? '' : 'line-clamp-5'}"
+		>
+			{book.summary}
+		</p>
+		{#if !summaryExpanded && book.summary.length > 300}
+			<!-- gradient fade over the last line when collapsed -->
+			<div class="absolute bottom-0 left-0 right-0 h-10 bg-gradient-to-t from-(--color-surface) to-transparent pointer-events-none"></div>
+		{/if}
+	</div>
+	{#if book.summary.length > 300}
+		<button
+			onclick={() => (summaryExpanded = !summaryExpanded)}
+			class="mt-2 text-xs text-(--color-brand)/70 hover:text-(--color-brand) transition-colors inline-flex items-center gap-1"
+		>
+			{summaryExpanded ? m.book_detail_less() : m.book_detail_more()}
+			<svg class="w-3 h-3 transition-transform {summaryExpanded ? 'rotate-180' : ''}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+				<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+			</svg>
+		</button>
+	{/if}
+</div>
+{/if}
+
 <!-- ══════════════════════════════════════════════════ Download row ══ -->
 {#if data.inLib && chapterList.length > 0}
 <div class="flex items-center gap-3 border border-(--color-border) rounded-xl px-4 py-3 mb-4">