fix(web): size reader sheets before scrolling

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; }

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;