From aff4f5aef2a5a7b043b0b3b674d7cf001ef4bc28 Mon Sep 17 00:00:00 2001
From: marwin <marwin@creamfresh.xyz>
Date: Thu, 2 Apr 2026 12:22:04 +0200
Subject: [PATCH] Mobile: hide volume, add PDF zoom +/- buttons, fix zoom
 scroll position
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Hide volume label/slider/input on mobile (≤600px)
- Add − and + buttons flanking the PDF zoom slider
- Preserve scroll fraction across zoom changes in PDF scroll mode

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 static/css/app.css |  6 ++++--
 static/js/app.js   | 28 +++++++++++++++++++++++-----
 2 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/static/css/app.css b/static/css/app.css
index 7f32870..98b3e6b 100644
--- a/static/css/app.css
+++ b/static/css/app.css
@@ -734,8 +734,10 @@ a:hover {
     justify-content: space-between;
   }
 
-  .volume-slider {
-    width: 60px;
+  .volume-label,
+  .volume-slider,
+  .volume-num {
+    display: none;
   }
 
   .affiliate-section {
diff --git a/static/js/app.js b/static/js/app.js
index 2ca54f8..1c7c628 100644
--- a/static/js/app.js
+++ b/static/js/app.js
@@ -3554,7 +3554,7 @@ function toggleSettingsPanel() {
     `;
   } else {
     panel.innerHTML = `
-      <label>Zoom <input type="range" id="rs-zoom" min="50" max="200" step="10" value="${readerSettings.pdfZoom}"> <span id="rs-zoom-val">${readerSettings.pdfZoom}%</span></label>
+      <label>Zoom <button class="btn btn-sm" id="rs-zoom-minus">−</button> <input type="range" id="rs-zoom" min="50" max="200" step="10" value="${readerSettings.pdfZoom}"> <button class="btn btn-sm" id="rs-zoom-plus">+</button> <span id="rs-zoom-val">${readerSettings.pdfZoom}%</span></label>
       <button class="btn btn-sm ${readerSettings.pdfInverted ? 'active' : ''}" id="rs-invert">Invert</button>
     `;
   }
@@ -3608,17 +3608,35 @@ function toggleSettingsPanel() {
   } else {
     const zoomRange = panel.querySelector('#rs-zoom');
     const zoomVal   = panel.querySelector('#rs-zoom-val');
-    zoomRange.addEventListener('input', () => {
-      readerSettings.pdfZoom = parseInt(zoomRange.value, 10);
-      zoomVal.textContent = readerSettings.pdfZoom + '%';
+
+    function applyPdfZoom(newZoom) {
+      const contentEl2 = $('reader-content');
+      // Preserve scroll position across zoom change
+      const fraction = contentEl2
+        ? contentEl2.scrollTop / (contentEl2.scrollHeight - contentEl2.clientHeight || 1)
+        : 0;
+      readerSettings.pdfZoom = newZoom;
+      zoomRange.value = newZoom;
+      zoomVal.textContent = newZoom + '%';
       saveReaderSettings();
       if (readerSettings.pdfPaginated) {
         pdfSmartZoomPage(pdfCurrentPage);
       } else {
         const vp = document.getElementById('pdf-viewport');
         if (vp) vp.style.zoom = readerSettings.pdfZoom / 100;
+        if (contentEl2 && fraction > 0) {
+          requestAnimationFrame(() => {
+            contentEl2.scrollTop = fraction * (contentEl2.scrollHeight - contentEl2.clientHeight);
+          });
+        }
       }
-    });
+    }
+
+    zoomRange.addEventListener('input', () => applyPdfZoom(parseInt(zoomRange.value, 10)));
+    panel.querySelector('#rs-zoom-minus').addEventListener('click', () =>
+      applyPdfZoom(Math.max(50,  readerSettings.pdfZoom - 10)));
+    panel.querySelector('#rs-zoom-plus').addEventListener('click', () =>
+      applyPdfZoom(Math.min(200, readerSettings.pdfZoom + 10)));
 
     panel.querySelector('#rs-invert').addEventListener('click', function () {
       readerSettings.pdfInverted = !readerSettings.pdfInverted;