diff --git a/bookish/static/css/style.css b/bookish/static/css/style.css
index 76096b4..38e2d8e 100644
--- a/bookish/static/css/style.css
+++ b/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;
diff --git a/bookish/static/js/reader.js b/bookish/static/js/reader.js
index f087895..6f11f7a 100644
--- a/bookish/static/js/reader.js
+++ b/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) {
diff --git a/bookish/templates/reader.html b/bookish/templates/reader.html
index b4a3102..abf7fae 100644
--- a/bookish/templates/reader.html
+++ b/bookish/templates/reader.html
@@ -14,6 +14,14 @@
-- / --
-
-