From c5e0e2dcfa66d15056feaab7e1e1155ee50a8da4 Mon Sep 17 00:00:00 2001
From: Antigravity <Antigravity@qpid.pro>
Date: Mon, 5 Oct 2026 13:02:37 +0300
Subject: [PATCH] fix(reader): mount app volume in docker-compose, move popup
 to body root and add smooth scroll tracking

---
 app/static/index.html | 50 +++++++++++++++++++++----------------------
 app/static/js/app.js  | 32 +++++++++++++++++++++++++--
 docker-compose.yml    |  1 +
 3 files changed, 56 insertions(+), 27 deletions(-)

diff --git a/app/static/index.html b/app/static/index.html
index b7a8fe4..5201876 100644
--- a/app/static/index.html
+++ b/app/static/index.html
@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
     <title>Notes — Персональный тренажер и словарь английского языка</title>
     <meta name="description" content="Защищённый персональный тренажёр и словарь английского языка с интервальными повторениями SRS SM-2, контекстным поиском и озвучкой">
-    <link rel="stylesheet" href="/static/css/style.css?v=2.3">
+    <link rel="stylesheet" href="/static/css/style.css?v=2.5">
     
     <!-- PWA meta and icons -->
     <link rel="manifest" href="/manifest.json">
@@ -581,29 +581,6 @@
                     </div>
                 </div>
             </div>
-
-            <!-- Interactive Click-to-Translate Popup -->
-            <div id="reader-word-popup" class="reader-word-popup hidden">
-                <div class="popup-header">
-                    <div class="popup-term-wrap">
-                        <strong id="popup-term" class="popup-term">word</strong>
-                        <span id="popup-phonetic" class="popup-phonetic">/wɜːd/</span>
-                        <button id="popup-audio-btn" class="icon-btn audio-btn" style="display: none;" title="Слушать произношение">🔊</button>
-                    </div>
-                    <button id="popup-close-btn" class="popup-close-btn">✕</button>
-                </div>
-                <div class="popup-body">
-                    <div id="popup-loading" class="popup-loading hidden">Переводим...</div>
-                    <div id="popup-content" class="popup-content">
-                        <div class="popup-translation" id="popup-translation">перевод</div>
-                        <div class="popup-context" id="popup-context">“Контекст из книги...”</div>
-                    </div>
-                </div>
-                <div class="popup-footer">
-                    <button id="popup-save-btn" class="btn btn-primary btn-sm btn-block">💾 Добавить в словарь</button>
-                    <div id="popup-saved-badge" class="popup-saved-badge hidden">✅ Сохранено в словарь!</div>
-                </div>
-            </div>
         </section>
 
         <!-- Sticky Bulk Action Bar for Batch Selection Mode -->
@@ -919,9 +896,32 @@
         </div>
     </div>
 
+    <!-- Interactive Click-to-Translate Popup (Mounted at body root to prevent scroll clipping) -->
+    <div id="reader-word-popup" class="reader-word-popup hidden">
+        <div class="popup-header">
+            <div class="popup-term-wrap">
+                <strong id="popup-term" class="popup-term">word</strong>
+                <span id="popup-phonetic" class="popup-phonetic">/wɜːd/</span>
+                <button id="popup-audio-btn" class="icon-btn audio-btn" style="display: none;" title="Слушать произношение">🔊</button>
+            </div>
+            <button id="popup-close-btn" class="popup-close-btn">✕</button>
+        </div>
+        <div class="popup-body">
+            <div id="popup-loading" class="popup-loading hidden">Переводим...</div>
+            <div id="popup-content" class="popup-content">
+                <div class="popup-translation" id="popup-translation">перевод</div>
+                <div class="popup-context" id="popup-context">“Контекст из книги...”</div>
+            </div>
+        </div>
+        <div class="popup-footer">
+            <button id="popup-save-btn" class="btn btn-primary btn-sm btn-block">💾 Добавить в словарь</button>
+            <div id="popup-saved-badge" class="popup-saved-badge hidden">✅ Сохранено в словарь!</div>
+        </div>
+    </div>
+
     <!-- Audio Element for native streaming -->
     <audio id="global-audio-player" preload="none"></audio>
 
-    <script src="/static/js/app.js?v=2.3"></script>
+    <script src="/static/js/app.js?v=2.5"></script>
 </body>
 </html>
diff --git a/app/static/js/app.js b/app/static/js/app.js
index 5a552a8..f458e91 100644
--- a/app/static/js/app.js
+++ b/app/static/js/app.js
@@ -2133,8 +2133,8 @@ document.addEventListener('DOMContentLoaded', () => {
         let top = rect.bottom + 8;
         // If bottom overflows viewport, flip above the word
         if (top + popupHeight > viewportHeight - 12) {
-            if (rect.top - popupHeight - 8 >= 12 || rect.top > viewportHeight / 2) {
-                top = Math.max(12, rect.top - popupHeight - 8);
+            if (rect.top - popupHeight - 8 >= 65 || rect.top > viewportHeight / 2) {
+                top = Math.max(65, rect.top - popupHeight - 8);
             }
         }
 
@@ -2206,6 +2206,34 @@ document.addEventListener('DOMContentLoaded', () => {
         }
     });
 
+    function updatePopupPositionOnScroll() {
+        if (!readerWordPopup || readerWordPopup.classList.contains('hidden')) return;
+        if (!popupCurrentData || !popupCurrentData.targetElement || !popupCurrentData.targetElement.isConnected) {
+            readerWordPopup.classList.add('hidden');
+            return;
+        }
+        const rect = popupCurrentData.targetElement.getBoundingClientRect();
+        const headerOffset = 65; // reader toolbar sticky height
+        if (rect.bottom < headerOffset || rect.top > window.innerHeight) {
+            readerWordPopup.classList.add('hidden');
+            return;
+        }
+        positionWordPopup(popupCurrentData.targetElement);
+    }
+
+    let popupScrollRaf = null;
+    function schedulePopupUpdate() {
+        if (!readerWordPopup || readerWordPopup.classList.contains('hidden')) return;
+        if (popupScrollRaf) return;
+        popupScrollRaf = requestAnimationFrame(() => {
+            popupScrollRaf = null;
+            updatePopupPositionOnScroll();
+        });
+    }
+
+    window.addEventListener('scroll', schedulePopupUpdate, { passive: true, capture: true });
+    window.addEventListener('resize', schedulePopupUpdate, { passive: true });
+
     if (popupSaveBtn) {
         popupSaveBtn.addEventListener('click', async () => {
             if (!popupCurrentData) return;
diff --git a/docker-compose.yml b/docker-compose.yml
index cd96840..21b9e0a 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -7,6 +7,7 @@ services:
       - "127.0.0.1:8002:8002"
     volumes:
       - ./data:/app/data
+      - ./app:/app/app
     environment:
       - HOST=0.0.0.0
       - PORT=8002