From bd6187e80837cd41d69de7bb290dc77d26fa2e97 Mon Sep 17 00:00:00 2001
From: patrick3399 <patrick3399@users.noreply.github.com>
Date: Sun, 8 Mar 2026 19:43:14 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20sprite=20thumbnail=20rendering=20?=
 =?UTF-8?q?=E2=80=94=20use=20height-based=20scaling=20and=20top-align?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Thumbnails in ThumbnailStrip (Reader) and PreviewGrid (gallery detail)
were split across cells or obscured by black areas due to incorrect
CSS sprite scaling.

Root cause:
- backgroundSize used 'auto {computed}px' which produced a height
  larger than the container
- backgroundPosition used 'center' for vertical alignment, causing
  the sprite to be vertically offset and show adjacent cells or
  black padding

Fix:
- Use 'backgroundSize: auto 100%' so sprite height exactly matches
  the container
- Use 'backgroundPosition: Xpx 0px' (top-aligned) to prevent
  vertical centering misalignment
- Recalculate X offset using height-based scale factor since the
  browser scales proportionally from height with auto 100%
---
 pwa/src/app/browse/[gid]/[token]/page.tsx | 11 +++++------
 pwa/src/components/Reader/index.tsx       | 11 ++++++-----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/pwa/src/app/browse/[gid]/[token]/page.tsx b/pwa/src/app/browse/[gid]/[token]/page.tsx
index 5a3c54fd..98f2a805 100644
--- a/pwa/src/app/browse/[gid]/[token]/page.tsx
+++ b/pwa/src/app/browse/[gid]/[token]/page.tsx
@@ -39,11 +39,10 @@ function PreviewGrid({
   return (
     <div ref={gridRef} className="grid grid-cols-3 sm:grid-cols-6 gap-2">
       {thumbs.map((thumb) => {
-        // Scale based on width only — backend normalizes sprite heights.
-        const tw = thumb.width ?? 200
+        // Scale X offset using height-based ratio — auto 100% forces sprite
+        // height to match the container, so X offset must use the same ratio.
         const th = thumb.height ?? 300
-        const scale = cellSize.w ? cellSize.w / tw : 1
-        const scaledH = th * scale
+        const hScale = cellSize.h ? cellSize.h / th : 1
         return (
           <button
             key={thumb.page}
@@ -56,8 +55,8 @@ function PreviewGrid({
                 className="w-full h-full"
                 style={{
                   backgroundImage: `url(${thumb.url})`,
-                  backgroundPosition: `${(thumb.offsetX ?? 0) * scale}px center`,
-                  backgroundSize: `auto ${scaledH}px`,
+                  backgroundPosition: `${(thumb.offsetX ?? 0) * hScale}px 0px`,
+                  backgroundSize: `auto 100%`,
                   backgroundRepeat: 'no-repeat',
                 }}
               />
diff --git a/pwa/src/components/Reader/index.tsx b/pwa/src/components/Reader/index.tsx
index 3be5ae6d..c67db769 100644
--- a/pwa/src/components/Reader/index.tsx
+++ b/pwa/src/components/Reader/index.tsx
@@ -681,13 +681,14 @@ function ThumbnailStrip({ images, currentPage, onPageSelect, previews }: Thumbna
             const ox = Number(parts[1])
             const cellW = Number(parts[2]) || 200
             const cellH = Number(parts[3]) || 300
-            // Scale based on width only — backend normalizes sprite heights.
-            const scale = 48 / cellW
-            const scaledOx = ox * scale
+            // Scale based on container height (64px) — auto 100% forces sprite
+            // height to match the container, so X offset must use the same ratio.
+            const hScale = 64 / cellH
+            const scaledOx = ox * hScale
             spriteStyle = {
               backgroundImage: `url(/api/eh/thumb-proxy?url=${encodeURIComponent(spriteUrl)})`,
-              backgroundPosition: `${scaledOx}px center`,
-              backgroundSize: `auto ${cellH * scale}px`,
+              backgroundPosition: `${scaledOx}px 0px`,
+              backgroundSize: `auto 100%`,
               backgroundRepeat: 'no-repeat',
               width: '100%',
               height: '100%',