Fix Full Book view layout so the entire manuscript is scrollable
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:
parent
6b1a9da5cc
commit
424aeab8a1
2 changed files with 25 additions and 0 deletions
|
|
@ -437,6 +437,14 @@ html, body {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.full-book-view {
|
||||||
|
flex: 1;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
.chapter-header {
|
.chapter-header {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: baseline;
|
align-items: baseline;
|
||||||
|
|
|
||||||
|
|
@ -310,6 +310,22 @@ const BOOK2_DIR = __BOOKDIR2_VALUE__;
|
||||||
await new Promise((r) => setTimeout(r, 300));
|
await new Promise((r) => setTimeout(r, 300));
|
||||||
out.fbNoStale = fb.state.doc.toString() === assembledGAB;
|
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
|
// closing and reopening the book preserves the chapter order
|
||||||
await window.folio.openBookPath(BOOK2_DIR);
|
await window.folio.openBookPath(BOOK2_DIR);
|
||||||
await new Promise((r) => setTimeout(r, 400));
|
await new Promise((r) => setTimeout(r, 400));
|
||||||
|
|
@ -384,6 +400,7 @@ const BOOK2_DIR = __BOOKDIR2_VALUE__;
|
||||||
"fbAfterReorderOk",
|
"fbAfterReorderOk",
|
||||||
"fbHasAllContent",
|
"fbHasAllContent",
|
||||||
"fbNoStale",
|
"fbNoStale",
|
||||||
|
"fbLayoutOk",
|
||||||
"reopenPersists",
|
"reopenPersists",
|
||||||
"deleteOk",
|
"deleteOk",
|
||||||
"fbAfterDeleteOk",
|
"fbAfterDeleteOk",
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue