avi/Folio
avi/Folio
1
0
Fork 0
Code Issues Pull requests Projects Releases 16 Packages Wiki Activity Actions

Fix Full Book view layout so the entire manuscript is scrollable

Browse source 
The Full Book pane had no CSS rule, so it fell back to block layout:
the CodeMirror editor grew to the full manuscript height and was
clipped by the overflow-hidden workspace, leaving the content below
the first screen unreachable and making a multi-chapter book appear
as a single chapter. Give .full-book-view the same flex-column layout
as .chapter-view so the editor is bounded and scrolls internally.

Add an e2e assertion (fbLayoutOk) that checks the computed layout is a
flex column with the editor bounded to the viewport, so this class of
rendering regression is caught in future runs.
This commit is contained in:
avi 2026-08-17 20:17:52 -05:00
commit 424aeab8a1
2 changed files with 25 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

17
tests/selftest-scenario.js
View file

@ -310,6 +310,22 @@ const BOOK2_DIR = __BOOKDIR2_VALUE__;
await new Promise((r) => setTimeout(r, 300));
out.fbNoStale = fb.state.doc.toString() === assembledGAB;
// the Full Book pane must be a bounded flex column whose editor can be
// scrolled, so every chapter is actually reachable on screen (a block
// layout here clips the manuscript to the first screenful)
const fbViewEl = document.getElementById("fullBookView");
const fbHost = document.getElementById("fullBookHost");
const fbEditor = fbHost.querySelector(".cm-editor");
const vs = getComputedStyle(fbViewEl);
out.fbViewDisplay = vs.display;
out.fbViewDir = vs.flexDirection;
out.fbEditorHeight = Math.round(fbEditor.getBoundingClientRect().height);
out.fbViewportHeight = window.innerHeight;
out.fbLayoutOk =
vs.display === "flex" &&
vs.flexDirection === "column" &&
fbEditor.getBoundingClientRect().height <= window.innerHeight;
// closing and reopening the book preserves the chapter order
await window.folio.openBookPath(BOOK2_DIR);
await new Promise((r) => setTimeout(r, 400));
@ -384,6 +400,7 @@ const BOOK2_DIR = __BOOKDIR2_VALUE__;
"fbAfterReorderOk",
"fbHasAllContent",
"fbNoStale",
"fbLayoutOk",
"reopenPersists",
"deleteOk",
"fbAfterDeleteOk",