web reader: fix chapter arrows (drive chap select) + mono (move #pane out of controls form)

1 files changed, 10 insertions, 6 deletions

diff --git a/internal/web/templates/reader.html b/internal/web/templates/reader.html
index c82d08e..921016a 100644
--- a/internal/web/templates/reader.html
+++ b/internal/web/templates/reader.html
@@ -27,16 +27,17 @@
         </select>
       </label>
 
+      {{/* Arrows drive the chapter <select> (the single source of truth) and
+           fire its change, so navigation always carries the CURRENT book +
+           target chapter -- no duplicate "chap" param from a competing hx-vals. */}}
       <span class="chap-nav">
-        <button type="button" hx-get="/reader" hx-target="#reader-root" hx-select="#reader-root"
-                hx-swap="outerHTML" hx-vals='{"chap":"{{.PrevChap}}"}'>&larr;</button>
+        <button type="button" onclick="var s=this.closest('.controls').querySelector('select[name=chap]');s.value='{{.PrevChap}}';s.dispatchEvent(new Event('change',{bubbles:true}));">&larr;</button>
         <label>{{.L.WebChapter}}
           <select name="chap">
             {{range .ChapOpts}}<option value="{{.N}}" {{if .Selected}}selected{{end}}>{{.N}}</option>{{end}}
           </select>
         </label>
-        <button type="button" hx-get="/reader" hx-target="#reader-root" hx-select="#reader-root"
-                hx-swap="outerHTML" hx-vals='{"chap":"{{.NextChap}}"}'>&rarr;</button>
+        <button type="button" onclick="var s=this.closest('.controls').querySelector('select[name=chap]');s.value='{{.NextChap}}';s.dispatchEvent(new Event('change',{bubbles:true}));">&rarr;</button>
       </span>
 
       {{range .VersionOpts}}
@@ -50,9 +51,12 @@
           <option value="interlinear" {{if eq .Display "interlinear"}}selected{{end}}>{{.L.OptInterlinear}}</option>
         </select>
       </label>
-
-      <div id="pane">{{.Reading}}</div>
     </form>
+
+    {{/* #pane is OUTSIDE the form so its reading text inherits body's
+         --font-reading (mono-responsive), not the form's --font-ui. It stays
+         inside #reader-root so an hx-select swap re-renders it with the controls. */}}
+    <div id="pane">{{.Reading}}</div>
   </div>
 
   <label class="theme-picker">{{.L.Theme}}