reader: full viewport layout + width slider (40-100%) with localStorage persist

- fixed position reader-page fills entire viewport (below navbar)
- reader-view-wrapper centers content area with flexbox
- width slider in toolbar controls --reader-width CSS variable
- epub.js rendition.resize() on slider change for proper reflow
- text-viewer max-width: min(800px, 100% - 6rem) for readability
- preference saved in localStorage

bookish/static/css/style.css

@@ -325,8 +325,15 @@ body {
 
 /* === Reader Page === */
 .reader-page {
-    max-width: 100%;
-    padding: 0;
+    position: fixed;
+    top: 56px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #fff;
+    display: flex;
+    flex-direction: column;
+    z-index: 10;
 }
 
 .reader-empty {
@@ -425,10 +432,44 @@ body {
     color: #999;
 }
 
+/* Toolbar group (width slider) */
+.toolbar-group {
+    display: flex;
+    align-items: center;
+    gap: 0.3rem;
+    padding: 0 0.3rem;
+}
+
+.toolbar-group svg {
+    color: #888;
+    flex-shrink: 0;
+}
+
+.width-slider {
+    width: 72px;
+    height: 4px;
+    cursor: pointer;
+    accent-color: #007aff;
+    background: transparent;
+}
+
+.width-slider:focus {
+    outline: none;
+}
+
+.width-label {
+    font-size: 0.7rem;
+    color: #999;
+    min-width: 30px;
+    text-align: right;
+    font-variant-numeric: tabular-nums;
+}
+
 /* Reader Layout */
 .reader-container {
     display: flex;
-    height: calc(100vh - 100px);
+    flex: 1;
+    min-height: 0;
 }
 
 .reader-sidebar {
@@ -440,6 +481,22 @@ body {
     transition: margin-left 0.3s;
 }
 
+.reader-view-wrapper {
+    flex: 1;
+    display: flex;
+    justify-content: center;
+    min-width: 0;
+    min-height: 0;
+}
+
+.reader-view {
+    width: 100%;
+    max-width: var(--reader-width, 100%);
+    overflow-y: auto;
+    background: #fff;
+    position: relative;
+}
+
 .reader-sidebar.collapsed {
     margin-left: -280px;
 }
@@ -533,12 +590,7 @@ body {
     cursor: pointer;
 }
 
-.reader-view {
-    flex: 1;
-    overflow-y: auto;
-    background: #fff;
-    position: relative;
-}
+
 
 #epubViewer {
     width: 100%;
@@ -560,8 +612,8 @@ body {
 }
 
 .text-viewer {
-    padding: 2rem 3rem;
-    max-width: 700px;
+    padding: 2rem 4rem;
+    max-width: min(800px, 100% - 6rem);
     margin: 0 auto;
     line-height: 1.8;
     font-size: 1rem;

bookish/static/js/reader.js

@@ -219,6 +219,34 @@
         const searchInput = document.getElementById("searchInput");
         const searchResults = document.getElementById("searchResults");
         const fullscreenToggle = document.getElementById("fullscreenToggle");
+        const widthSlider = document.getElementById("widthSlider");
+        const widthLabel = document.getElementById("widthLabel");
+
+        // Reader width slider
+        if (widthSlider && widthLabel) {
+            const saved = localStorage.getItem("bookish_reader_width") || "100";
+            widthSlider.value = saved;
+            widthLabel.textContent = saved + "%";
+            document.documentElement.style.setProperty("--reader-width", saved + "%");
+
+            widthSlider.addEventListener("input", () => {
+                const val = widthSlider.value;
+                widthLabel.textContent = val + "%";
+                document.documentElement.style.setProperty("--reader-width", val + "%");
+                localStorage.setItem("bookish_reader_width", val);
+
+                // Resize epub.js rendition to match new container width
+                if (window._rendition) {
+                    const viewer = document.getElementById("epubViewer");
+                    if (viewer) {
+                        const rect = viewer.getBoundingClientRect();
+                        if (rect.width > 0 && rect.height > 0) {
+                            window._rendition.resize(rect.width, rect.height);
+                        }
+                    }
+                }
+            });
+        }
 
         // Sidebar toggle
         if (sidebarToggle && sidebar) {