From de9e0b42466fd8a78042b7500213c81e86d981bb Mon Sep 17 00:00:00 2001
From: Admin <admin@kalekber.cc>
Date: Fri, 6 Mar 2026 20:04:17 +0500
Subject: [PATCH] Fix mobile: hide chapter dates on small screens, fix summary
 word-break when expanded

---
 ui/src/routes/books/[slug]/+page.svelte | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/ui/src/routes/books/[slug]/+page.svelte b/ui/src/routes/books/[slug]/+page.svelte
index 0b0442f..5ae845d 100644
--- a/ui/src/routes/books/[slug]/+page.svelte
+++ b/ui/src/routes/books/[slug]/+page.svelte
@@ -215,7 +215,7 @@
 			<!-- Summary with expand toggle -->
 			{#if data.book.summary}
 				<div class="mt-1">
-					<p class="text-zinc-400 text-sm leading-relaxed {summaryExpanded ? '' : 'line-clamp-3'}">
+					<p class="text-zinc-400 text-sm leading-relaxed break-words {summaryExpanded ? '' : 'line-clamp-3'}">
 						{data.book.summary}
 					</p>
 					{#if data.book.summary.length > 220}
@@ -344,18 +344,18 @@
 					? `/books/${data.book.slug}/chapters/${chapter.number}`
 					: `/books/${data.book.slug}/chapters/${chapter.number}?preview=1&chapter_url=${encodeURIComponent((chapter as { url?: string }).url ?? '')}&title=${encodeURIComponent(chapter.title ?? '')}`}
 				<div class="flex items-center gap-2 px-3 py-2 rounded hover:bg-zinc-800/70 transition-colors group {isCurrent ? 'bg-zinc-800' : ''}">
-					<a href={chapterUrl} class="flex items-baseline gap-2 flex-1 min-w-0">
+					<a href={chapterUrl} class="flex items-center gap-2 flex-1 min-w-0">
 						<!-- Chapter number -->
 						<span class="text-xs font-mono w-9 text-right flex-shrink-0 {isCurrent ? 'text-amber-400' : 'text-zinc-600'}">
 							{chapter.number}
 						</span>
 						<!-- Title -->
-						<span class="text-sm {isCurrent ? 'text-amber-300' : 'text-zinc-300 group-hover:text-zinc-100'} truncate flex-1 transition-colors">
+						<span class="text-sm {isCurrent ? 'text-amber-300' : 'text-zinc-300 group-hover:text-zinc-100'} truncate min-w-0 flex-1 transition-colors">
 							{chapter.title || `Chapter ${chapter.number}`}
 						</span>
-						<!-- Date label, separated visually -->
+						<!-- Date label — desktop only -->
 						{#if (chapter as { date_label?: string }).date_label}
-							<span class="text-xs text-zinc-600 flex-shrink-0 hidden sm:block">&middot; {(chapter as { date_label?: string }).date_label}</span>
+							<span class="text-xs text-zinc-600 flex-shrink-0 hidden sm:inline">&middot; {(chapter as { date_label?: string }).date_label}</span>
 						{/if}
 						<!-- "reading" badge -->
 						{#if isCurrent}