From 0923dc1dce434f2682ce3b27ecd87d55fafb47b8 Mon Sep 17 00:00:00 2001
From: yiekheng <yiekheng@04080616.xyz>
Date: Thu, 16 Apr 2026 20:12:41 +0800
Subject: [PATCH] Reader: contain img inside aspect-ratio placeholder
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Prior rendering let <img> flow naturally (h-auto), so subpixel aspect
mismatches between DB dims and natural file dims caused img to over-
flow the placeholder div — manifesting as gaps or content overlap
between consecutive pages. Switching to absolute inset-0 +
object-contain pins the img to div dimensions regardless.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 components/PageReader.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/PageReader.tsx b/components/PageReader.tsx
index dca3393..8bc7784 100644
--- a/components/PageReader.tsx
+++ b/components/PageReader.tsx
@@ -659,7 +659,7 @@ export function PageReader({
                         src={url}
                         alt={`Page ${p.number}`}
                         fetchPriority={isVisible ? "high" : "low"}
-                        className="w-full h-auto block [-webkit-touch-callout:none]"
+                        className="absolute inset-0 w-full h-full object-contain [-webkit-touch-callout:none]"
                         draggable={false}
                         onError={() => {
                           setImages((prev) => {