diff --git a/ui/src/routes/books/[slug]/+page.svelte b/ui/src/routes/books/[slug]/+page.svelte index 09bd267..0fdb006 100644 --- a/ui/src/routes/books/[slug]/+page.svelte +++ b/ui/src/routes/books/[slug]/+page.svelte @@ -32,15 +32,23 @@ const genres = $derived(parseGenres(data.book.genres)); - // Paginate chapter list — show 100 at a time - const PAGE_SIZE = 100; + // Paginate chapter list — 50 on mobile, 100 on sm+ (≥640px) + let pageSize = $state(50); + + onMount(() => { + const mq = window.matchMedia('(min-width: 640px)'); + pageSize = mq.matches ? 100 : 50; + const handler = (e: MediaQueryListEvent) => { pageSize = e.matches ? 100 : 50; }; + mq.addEventListener('change', handler); + return () => mq.removeEventListener('change', handler); + }); // Start on the page that contains the current chapter (if any) function pageForChapter(chapterNum: number | null, list: typeof chapterList): number { if (!chapterNum || list.length === 0) return 0; const idx = list.findIndex((c) => c.number === chapterNum); if (idx === -1) return 0; - return Math.floor(idx / PAGE_SIZE); + return Math.floor(idx / pageSize); } let page = $state(pageForChapter(data.lastChapter, data.inLib ? data.chapters : (data.previewChapters ?? []))); @@ -51,9 +59,9 @@ ? data.chapters : (data.previewChapters ?? []) ); - const totalPages = $derived(Math.ceil(chapterList.length / PAGE_SIZE)); + const totalPages = $derived(Math.ceil(chapterList.length / pageSize)); const visibleChapters = $derived( - chapterList.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE) + chapterList.slice(page * pageSize, (page + 1) * pageSize) ); // ── Chapter list polling ────────────────────────────────────────────────── @@ -354,7 +362,7 @@ ← - {page * PAGE_SIZE + 1}–{Math.min((page + 1) * PAGE_SIZE, chapterList.length)} of {chapterList.length} + {page * pageSize + 1}–{Math.min((page + 1) * pageSize, chapterList.length)} of {chapterList.length} (page = Math.min(totalPages - 1, page + 1))} diff --git a/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte b/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte index 9935232..e28c1f5 100644 --- a/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte +++ b/ui/src/routes/books/[slug]/chapters/[n]/+page.svelte @@ -89,9 +89,7 @@ {data.chapter.title || `Chapter ${data.chapter.number}`} - {#if data.chapter.date_label} - {data.chapter.date_label} - {/if} +
{data.chapter.date_label}