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

app/static/css/style.css

@@ -43,6 +43,7 @@
     --sar: env(safe-area-inset-right, 0px);
     --sab: env(safe-area-inset-bottom, 0px);
     --sal: env(safe-area-inset-left, 0px);
+    --navbar-height: 60px;
 }
 
 [data-theme="light"] {
@@ -81,7 +82,7 @@
 }
 
 html, body {
-    overflow-x: hidden;
+    overflow-x: clip;
     -webkit-tap-highlight-color: transparent;
 }
 
@@ -254,6 +255,8 @@ body {
     position: sticky;
     top: 0;
     z-index: 100;
+    min-height: var(--navbar-height);
+    box-sizing: border-box;
 }
 
 .nav-brand {
@@ -2750,6 +2753,9 @@ body {
 
     /* Reader Interface Toolbar */
     .reader-toolbar {
+        position: static !important;
+        top: auto !important;
+        box-shadow: none !important;
         padding: 8px 10px;
         gap: 8px;
         flex-direction: column;
@@ -3080,14 +3086,15 @@ body {
     border: 1px solid var(--border-color);
     border-radius: var(--radius-lg);
     box-shadow: var(--shadow-lg);
-    overflow: hidden;
 }
 
 .reader-toolbar {
     position: sticky;
-    top: 0;
+    top: var(--navbar-height, 60px);
-    z-index: 100;
+    z-index: 1000;
     background-color: var(--bg-surface);
+    border-top-left-radius: var(--radius-lg);
+    border-top-right-radius: var(--radius-lg);
     border-bottom: 1px solid var(--border-color);
     padding: 12px 18px;
     display: flex;
@@ -3095,6 +3102,7 @@ body {
     align-items: center;
     flex-wrap: wrap;
     gap: 12px;
+    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
 }
 
 .reader-toolbar-left {
@@ -3317,8 +3325,11 @@ body {
     position: fixed;
     top: 64px;
     right: 28px;
-    width: 320px;
+    width: 330px;
     max-width: calc(100vw - 32px);
+    max-height: calc(100vh - 80px);
+    display: flex;
+    flex-direction: column;
     background-color: var(--bg-surface);
     border: 1px solid var(--border-focus);
     border-radius: var(--radius-lg);
@@ -3332,6 +3343,7 @@ body {
     display: flex;
     justify-content: space-between;
     align-items: center;
+    flex-shrink: 0;
     margin-bottom: 12px;
     padding-bottom: 8px;
     border-bottom: 1px solid var(--border-color);
@@ -3347,6 +3359,19 @@ body {
     display: flex;
     flex-direction: column;
     gap: 12px;
+    overflow-y: auto;
+    padding-right: 4px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--border-focus) transparent;
+}
+
+.reader-settings-body::-webkit-scrollbar {
+    width: 6px;
+}
+
+.reader-settings-body::-webkit-scrollbar-thumb {
+    background-color: var(--border-focus);
+    border-radius: 3px;
 }
 
 .setting-row {
@@ -3355,6 +3380,18 @@ body {
     gap: 6px;
 }
 
+.setting-row-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 8px;
+    align-items: flex-end;
+}
+
+.setting-row-grid .seg-btn {
+    padding: 6px 4px;
+    font-size: 11.5px;
+}
+
 .setting-label {
     font-size: 11px;
     font-weight: 700;

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, viewport-fit=cover">
     <title>Notes — Персональный тренажер и словарь английского языка</title>
     <meta name="description" content="Защищённый персональный тренажёр и словарь английского языка с интервальными повторениями SRS SM-2, контекстным поиском и озвучкой">
-    <link rel="stylesheet" href="/static/css/style.css?v=3.6">
+    <link rel="stylesheet" href="/static/css/style.css?v=3.7">
     
     <!-- PWA meta and icons -->
     <link rel="manifest" href="/manifest.json">
@@ -993,13 +993,23 @@
                 </div>
             </div>
 
-            <!-- Font Size -->
+            <!-- Font Size & Text Alignment (Compact 2-col Grid) -->
-            <div class="setting-row">
+            <div class="setting-row-grid">
-                <span class="setting-label">Размер шрифта</span>
+                <div class="setting-row">
-                <div class="setting-stepper">
+                    <span class="setting-label">Размер</span>
-                    <button id="setting-font-dec-btn" class="step-btn">A−</button>
+                    <div class="setting-stepper">
-                    <span id="setting-font-size-val" class="step-val">18 px</span>
+                        <button id="setting-font-dec-btn" class="step-btn">A−</button>
-                    <button id="setting-font-inc-btn" class="step-btn">A+</button>
+                        <span id="setting-font-size-val" class="step-val">18 px</span>
+                        <button id="setting-font-inc-btn" class="step-btn">A+</button>
+                    </div>
+                </div>
+
+                <div class="setting-row">
+                    <span class="setting-label">Выравнивание</span>
+                    <div class="setting-segmented-control" id="reader-align-group">
+                        <button class="seg-btn active" data-align="left" title="По левому краю">По краю</button>
+                        <button class="seg-btn" data-align="justify" title="По ширине (Justified)">По ширине</button>
+                    </div>
                 </div>
             </div>
 
@@ -1033,15 +1043,6 @@
                     <button class="theme-chip theme-chip-oled" data-theme="oled" title="OLED (Абсолютный чёрный)">🖤 OLED</button>
                 </div>
             </div>
-
-            <!-- Text Alignment -->
-            <div class="setting-row">
-                <span class="setting-label">Выравнивание текста</span>
-                <div class="setting-segmented-control" id="reader-align-group">
-                    <button class="seg-btn active" data-align="left">По левому краю</button>
-                    <button class="seg-btn" data-align="justify">По ширине</button>
-                </div>
-            </div>
         </div>
     </div>
 
@@ -1074,7 +1075,7 @@
     <!-- Audio Element for native streaming -->
     <audio id="global-audio-player" preload="none"></audio>
 
-    <script src="/static/js/app.js?v=3.6"></script>
+    <script src="/static/js/app.js?v=3.7"></script>
 </body>
 </html>
 

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();