From cf14bf3dc55b4b94b62bc7437c97eb5e024c8f7c Mon Sep 17 00:00:00 2001
From: hectorqin <hectorqin@163.com>
Date: Mon, 26 Oct 2026 13:49:46 +0800
Subject: [PATCH] fix(web): size reader sheets before scrolling

---
 web/src/styles/reader.css | 8 +++++++-
 web/src/styles/sheet.css  | 4 ++--
 2 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/src/styles/reader.css b/web/src/styles/reader.css
index 4afa685..f643f95 100644
--- a/web/src/styles/reader.css
+++ b/web/src/styles/reader.css
@@ -3695,7 +3695,13 @@ svg.icon { display: inline-block; width: 1em; height: 1em; flex-shrink: 0; verti
 }
 .reader-screen .rail-button { width: 48px; height: 48px; border-radius: 50%; background: var(--reader-surface); box-shadow: 0 3px 12px #00000020; }
 .reader-screen .rail-button .icon { font-size: var(--text-display); }
-@media (max-width: 700px) { .reader-screen .sheet { max-height: min(62dvh, 36rem); } }
+@media (max-width: 700px) {
+  .reader-screen .sheet {
+    height: min(62vh, calc(100vh - var(--safe-top) - 1.5rem));
+    height: min(62dvh, calc(100dvh - var(--safe-top) - 1.5rem));
+    max-height: 36rem;
+  }
+}
 .reader-screen .sheet .field { padding-block: 0.8rem; }
 .reader-screen .sheet .tts-bar { position: static; border-radius: var(--radius-md); width: auto; transform: none; margin-bottom: 1rem; }
 .reader-screen .sheet .field { grid-template-columns: minmax(5.5rem, max-content) minmax(0, 1fr); gap: 0.75rem; padding-block: 0.5rem; }
diff --git a/web/src/styles/sheet.css b/web/src/styles/sheet.css
index fe32b9b..20750aa 100644
--- a/web/src/styles/sheet.css
+++ b/web/src/styles/sheet.css
@@ -85,12 +85,12 @@
 }
 
 .sheet-body {
-  flex: 1 1 0%;
+  flex: 1 1 auto;
   /* Let the body give up intrinsic content height so long lists scroll inside
      the capped sheet instead of overflowing past the viewport. */
   flex-basis: 0;
   min-height: 0;
-  height: 0;
+  height: auto;
   overflow-y: auto;
   overscroll-behavior: contain;
   -webkit-overflow-scrolling: touch;