Fix Reader zoom and result layout

static/reader.css

@@ -23,19 +23,20 @@ body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex
 .reader-viewport { min-height: 0; flex: 1; overflow: auto; background: #121416; }
 .loading-status { display: none; color: #aeb5ba; font-size: 13px; text-align: center; padding: 12px; }
 .loading-status[hidden] { display: none; }
-.reader-content { --reader-zoom: 1; width: min(calc(100% * var(--reader-zoom)), calc(1100px * var(--reader-zoom))); margin: 0 auto; padding: 20px; }
+.reader-content { --reader-zoom: 1; width: min(100%, 1100px); margin: 0 auto; padding: 20px; }
 .reader-page { position: relative; margin: 0 auto 18px; background: white; box-shadow: 0 2px 14px #0008; min-height: 160px; }
+.reader-content[data-mode="pdf"] .reader-page { width: calc(100% * var(--reader-zoom)); }
 .reader-page canvas { display: block; width: 100%; height: auto; }
 .reader-page canvas { position: relative; opacity: 0; transition: opacity 120ms ease; }
 .reader-page canvas.ready { opacity: 1; }
-.reader-image { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #fff; }
-.reader-text { margin: 0 auto; max-width: 76ch; white-space: pre-wrap; overflow-wrap: anywhere; font: 17px/1.8 ui-monospace, monospace; color: #e7e9eb; }
-.reader-markdown { margin: 0 auto; max-width: 76ch; font-size: 17px; line-height: 1.75; }
+.reader-image { display: block; width: calc(100% * var(--reader-zoom)); max-width: none; height: auto; margin: 0 auto; background: #fff; }
+.reader-text { margin: 0 auto; max-width: 76ch; white-space: pre-wrap; overflow-wrap: anywhere; font: calc(17px * var(--reader-zoom))/1.8 ui-monospace, monospace; color: #e7e9eb; }
+.reader-markdown { margin: 0 auto; max-width: 76ch; font-size: calc(17px * var(--reader-zoom)); line-height: 1.75; }
 .reader-markdown img { max-width: 100%; }
 .reader-markdown a { color: #72a7df; }
 .reader-error { margin: 20vh auto; max-width: 560px; color: #d7dadd; text-align: center; line-height: 1.6; }
 .epub-frame { width: 100%; height: calc(100vh - 96px); background: white; }
 .docx-body { overflow-x: auto; color: #111; }
-.docx-body .reader-docx-wrapper { background: transparent; padding: 0; }
+.docx-body .reader-docx-wrapper { background: transparent; padding: 0; zoom: var(--reader-zoom); }
 .docx-body .reader-docx-wrapper > section.reader-docx { margin: 0 auto 18px; box-shadow: 0 2px 14px #0008; }
 @media (max-width: 600px) { .reader-toolbar { min-height: 36px; gap: 1px; padding: 2px 5px; } .reader-content { padding: 10px; } .reader-heading { display: none; } .reader-actions { flex: 1; justify-content: flex-end; gap: 1px; min-width: 0; } .reader-actions .control-group { gap: 0; } .reader-actions .icon-button { width: 26px; } .reader-actions .text-button { height: 30px; padding: 0 3px; } .loading-status { display: block; padding: 10px 6px 0; } .icon-button { width: 26px; height: 30px; flex: none; } .compact-input { height: 30px; padding-right: 3px; font-size: 11px; } .compact-input input { width: 24px; height: 28px; } .zoom-controls .compact-input input { width: 32px; } .history-panel { top: 36px; } }

static/reader.js

@@ -35,6 +35,7 @@ const downloadUrl = params.get("download") || sourceUrl;
 const extension = (params.get("ext") || "").toLowerCase();
 const capability = VoiceOfMLReader.capability(extension);
 const content = document.querySelector("#content");
+content.dataset.mode = capability.mode || "unsupported";
 const status = document.querySelector("#status");
 const loadingStatus = document.querySelector("#loading-status");
 const title = params.get("title") || "在线阅读";
@@ -87,10 +88,13 @@ document.querySelector("#back").addEventListener("click", () => {
 });
 function setZoom(percent, persist = true) {
   const normalized = VoiceOfMLReader.clampNumber(percent, 50, 250, 100);
+  const horizontalCenter = viewport.scrollWidth ? (viewport.scrollLeft + viewport.clientWidth / 2) / viewport.scrollWidth : 0;
   zoom = normalized / 100;
   content.style.setProperty("--reader-zoom", String(zoom));
   zoomInput.value = String(normalized);
+  if (epubRendition) epubRendition.themes.fontSize(`${normalized}%`);
   if (pdfDocument) rerenderVisiblePdfPages();
+  viewport.scrollLeft = horizontalCenter * viewport.scrollWidth - viewport.clientWidth / 2;
   if (persist) scheduleSave();
 }
 for (const [id, delta] of [["#zoom-out", -10], ["#zoom-in", 10]]) {
@@ -222,7 +226,7 @@ async function renderPdfShell(shell, force = false, priority = false) {
   try {
     const page = await pdfDocument.getPage(Number(shell.dataset.page));
     const base = page.getViewport({ scale: 1 });
-    const scale = Math.min(3, Math.max(0.5, content.clientWidth / base.width));
+    const scale = Math.min(3, Math.max(0.5, shell.clientWidth / base.width));
     const rendered = page.getViewport({ scale });
     const canvas = shell.querySelector("canvas");
     canvas.width = rendered.width; canvas.height = rendered.height;
@@ -377,6 +381,7 @@ async function renderEpub(prepared) {
 }
 async function displayEpub(url, frame) {
   const book = ePub(url); epubRendition = book.renderTo(frame, { width: "100%", height: "100%", spread: "none", flow: "scrolled-doc" });
+  epubRendition.themes.fontSize(`${Math.round(zoom * 100)}%`);
   epubRendition.on("relocated", (location) => { epubLocation = location && location.start ? location.start.cfi : ""; scheduleSave(); });
   const restoredLocation = restoredEntry && restoredEntry.epubLocation;
   try { await epubRendition.display(restoredLocation || undefined); }

static/style.css

@@ -944,19 +944,42 @@ body.mobile .multi-toggle { padding: 1px 4px; font-size: 11px; }
   align-items: flex-start;
 }
 
+body:not(.mobile) .result-item {
+  display: grid;
+  grid-template-columns: auto auto minmax(0, 1fr) auto;
+  grid-template-rows: auto auto auto;
+  column-gap: 10px;
+  row-gap: 3px;
+}
+
+body:not(.mobile) .result-checkbox { grid-column: 1; grid-row: 1 / 4; align-self: start; margin-top: 4px; }
+body:not(.mobile) .result-file-icon { grid-column: 2; grid-row: 1 / 4; }
+body:not(.mobile) .result-info { display: contents; }
+body:not(.mobile) .result-title { grid-column: 3; grid-row: 1; min-width: 0; }
+body:not(.mobile) .result-actions { grid-column: 4; grid-row: 1; justify-content: flex-end; }
+body:not(.mobile) .result-path { grid-column: 3 / 5; grid-row: 2; margin-top: 0; min-width: 0; }
+body:not(.mobile) .result-meta { grid-column: 3 / 5; grid-row: 3; margin-top: 0; min-width: 0; }
+
 .result-action-btn {
+  height: 24px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
   font-size: 11px;
+  line-height: 1;
   padding: 3px 8px;
   border-radius: var(--radius-sm);
   color: var(--on-surface-variant);
   border: 1px solid var(--outline-variant);
   white-space: nowrap;
+  text-decoration: none;
   transition: all var(--transition);
 }
 
 .result-action-btn:hover, .result-action-btn:focus-visible {
   background: var(--surface-variant);
   border-color: var(--outline);
+  text-decoration: none;
 }
 
 .result-action-btn.primary {