From 3622dcc02f99904625d2db1cab2fc32300d4ab51 Mon Sep 17 00:00:00 2001 From: MechaCat02 Date: Mon, 6 Jul 2026 21:43:21 +0200 Subject: [PATCH] fix: reserve detail cover box and async-decode list/shelf covers MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - The manga detail desktop overview cover had no reserved aspect-ratio, so the meta column reflowed when it decoded. Give .cover aspect-ratio: 2/3 + object-fit: cover (mirrors MangaCard). - Add decoding="async" to the detail hero/overview covers and the list/shelf covers (bookmarks, history, continue-reading, collections, tagged rows) so decode stays off the main thread — previously only MangaCard had it. Co-Authored-By: Claude Opus 4.8 (1M context) --- backend/Cargo.lock | 2 +- backend/Cargo.toml | 2 +- frontend/package.json | 2 +- frontend/src/lib/components/BookmarkList.svelte | 1 + frontend/src/lib/components/CollectionsGrid.svelte | 1 + .../src/lib/components/ContinueReadingShelf.svelte | 1 + frontend/src/lib/components/HistoryList.svelte | 1 + frontend/src/lib/components/HistoryList.svelte.test.ts | 10 ++++++++++ frontend/src/lib/components/TaggedChapterRow.svelte | 4 ++-- frontend/src/lib/components/TaggedMangaRow.svelte | 4 ++-- frontend/src/lib/components/TaggedPageRow.svelte | 1 + frontend/src/routes/manga/[id]/+page.svelte | 7 ++++++- 12 files changed, 28 insertions(+), 8 deletions(-) diff --git a/backend/Cargo.lock b/backend/Cargo.lock index 55c05b4..e7b0b35 100644 --- a/backend/Cargo.lock +++ b/backend/Cargo.lock @@ -1558,7 +1558,7 @@ checksum = "c41e0c4fef86961ac6d6f8a82609f55f31b05e4fce149ac5710e439df7619ba4" [[package]] name = "mangalord" -version = "0.115.1" +version = "0.115.2" dependencies = [ "anyhow", "argon2", diff --git a/backend/Cargo.toml b/backend/Cargo.toml index f065cd7..15bb0c6 100644 --- a/backend/Cargo.toml +++ b/backend/Cargo.toml @@ -1,6 +1,6 @@ [package] name = "mangalord" -version = "0.115.1" +version = "0.115.2" edition = "2021" default-run = "mangalord" diff --git a/frontend/package.json b/frontend/package.json index 24385fd..916882a 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -1,6 +1,6 @@ { "name": "mangalord-frontend", - "version": "0.115.1", + "version": "0.115.2", "private": true, "type": "module", "scripts": { diff --git a/frontend/src/lib/components/BookmarkList.svelte b/frontend/src/lib/components/BookmarkList.svelte index cfa9feb..02f4cf5 100644 --- a/frontend/src/lib/components/BookmarkList.svelte +++ b/frontend/src/lib/components/BookmarkList.svelte @@ -23,6 +23,7 @@ alt="" class="cover" loading="lazy" + decoding="async" /> {:else}
diff --git a/frontend/src/lib/components/CollectionsGrid.svelte b/frontend/src/lib/components/CollectionsGrid.svelte index 149faa2..994aaee 100644 --- a/frontend/src/lib/components/CollectionsGrid.svelte +++ b/frontend/src/lib/components/CollectionsGrid.svelte @@ -26,6 +26,7 @@ alt="" class="collage-cover" loading="lazy" + decoding="async" /> {/each} {/if} diff --git a/frontend/src/lib/components/ContinueReadingShelf.svelte b/frontend/src/lib/components/ContinueReadingShelf.svelte index a834f14..8fb137f 100644 --- a/frontend/src/lib/components/ContinueReadingShelf.svelte +++ b/frontend/src/lib/components/ContinueReadingShelf.svelte @@ -51,6 +51,7 @@ alt="" class="cover" loading="lazy" + decoding="async" /> {:else} diff --git a/frontend/src/lib/components/HistoryList.svelte b/frontend/src/lib/components/HistoryList.svelte index 676ec46..af5481d 100644 --- a/frontend/src/lib/components/HistoryList.svelte +++ b/frontend/src/lib/components/HistoryList.svelte @@ -89,6 +89,7 @@ alt="" class="cover" loading="lazy" + decoding="async" /> {:else}
diff --git a/frontend/src/lib/components/HistoryList.svelte.test.ts b/frontend/src/lib/components/HistoryList.svelte.test.ts index 3bed83a..3c67646 100644 --- a/frontend/src/lib/components/HistoryList.svelte.test.ts +++ b/frontend/src/lib/components/HistoryList.svelte.test.ts @@ -29,6 +29,16 @@ describe('HistoryList', () => { expect(cont.getAttribute('href')).toBe('/manga/m1/chapter/c9'); }); + it('renders covers with lazy loading and async decode', () => { + render(HistoryList, { + props: { entries: [entry({ manga_cover_image_path: 'mangas/m1/cover.jpg' })] } + }); + const img = document.querySelector('img.cover') as HTMLImageElement; + expect(img).not.toBeNull(); + expect(img.getAttribute('loading')).toBe('lazy'); + expect(img.getAttribute('decoding')).toBe('async'); + }); + it('appends the page number to the continue line only past page 1', () => { // The page suffix is a separate text node from "Continue Chapter N", // so assert against the link's normalized text rather than getByText. diff --git a/frontend/src/lib/components/TaggedChapterRow.svelte b/frontend/src/lib/components/TaggedChapterRow.svelte index 21f99c1..ff4d1c6 100644 --- a/frontend/src/lib/components/TaggedChapterRow.svelte +++ b/frontend/src/lib/components/TaggedChapterRow.svelte @@ -27,7 +27,7 @@
  • diff --git a/frontend/src/routes/manga/[id]/+page.svelte b/frontend/src/routes/manga/[id]/+page.svelte index 6bc1612..db83056 100644 --- a/frontend/src/routes/manga/[id]/+page.svelte +++ b/frontend/src/routes/manga/[id]/+page.svelte @@ -380,6 +380,7 @@ src={fileUrl(manga.cover_image_path)} alt="" loading="eager" + decoding="async" /> {/if}
    @@ -401,6 +402,7 @@ alt="{manga.title} cover" class="cover" loading="eager" + decoding="async" data-testid="manga-cover" /> {/if} @@ -791,7 +793,10 @@ .cover { width: 100%; - height: auto; + /* Reserve the 2/3 box so the meta column doesn't reflow when the + cover decodes (mirrors MangaCard's cover). */ + aspect-ratio: 2 / 3; + object-fit: cover; border-radius: var(--radius-md); background: var(--surface); }