fix(reader): sticky reader toolbar, compact settings grid, and viewport-aware Aa dropdown

app/static/js/app.js

@@ -3653,11 +3653,13 @@ document.addEventListener('DOMContentLoaded', () => {
             readerSettingsPanel.style.top = '';
             readerSettingsPanel.style.left = '';
             readerSettingsPanel.style.right = '';
+            readerSettingsPanel.style.maxHeight = '';
             return;
         }
         const rect = readerSettingsBtn.getBoundingClientRect();
-        const panelWidth = 320;
+        const panelWidth = 330;
         const viewportWidth = window.innerWidth;
+        const viewportHeight = window.innerHeight;
 
         let left = rect.right - panelWidth;
         if (left < 16) left = 16;
@@ -3665,9 +3667,13 @@ document.addEventListener('DOMContentLoaded', () => {
             left = viewportWidth - panelWidth - 16;
         }
 
-        readerSettingsPanel.style.top = `${Math.round(rect.bottom + 8)}px`;
+        const top = Math.round(rect.bottom + 8);
+        const maxH = Math.max(260, viewportHeight - top - 16);
+
+        readerSettingsPanel.style.top = `${top}px`;
         readerSettingsPanel.style.left = `${Math.round(left)}px`;
         readerSettingsPanel.style.right = 'auto';
+        readerSettingsPanel.style.maxHeight = `${maxH}px`;
     }
 
     function initReaderSettingsPanel() {
@@ -3816,6 +3822,12 @@ document.addEventListener('DOMContentLoaded', () => {
                 positionSettingsPanel();
             }
         }, { passive: true });
+
+        window.addEventListener('scroll', () => {
+            if (readerSettingsPanel && !readerSettingsPanel.classList.contains('hidden') && window.innerWidth > 768) {
+                positionSettingsPanel();
+            }
+        }, { passive: true });
     }
 
     initReaderSettingsPanel();