fix: reserve detail cover box and async-decode list/shelf covers
- 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) <noreply@anthropic.com>
This commit is contained in:
@@ -380,6 +380,7 @@
|
||||
src={fileUrl(manga.cover_image_path)}
|
||||
alt=""
|
||||
loading="eager"
|
||||
decoding="async"
|
||||
/>
|
||||
{/if}
|
||||
<div class="hero-text">
|
||||
@@ -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);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user