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;
-    z-index: 100;
+    top: var(--navbar-height, 60px);
+    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;