Fix text overflowing to the right in progressive web app

[confusinguser]

Fixed

• Fixed: Text is sometimes cut off on the right on small screens in "1 Column" mode (Fixes Text is sometimes cut off on the right on small screens in "1 Column" mode #4842)

[Copilot]

Pull request overview

This PR addresses issue #4842 by adjusting how the reader computes the effective page width used for column-based pagination, aiming to prevent slight horizontal drift that can cause text to be clipped on the right in “1 Column” mode (notably on smaller screens / PWA).

Changes:

• Recomputes pageWidth based on the actual .book-content element width rather than deriving it from the outer reader width and a calculated margin.
• Forces pageWidth to re-evaluate when pageStyles changes (so margin/style adjustments can affect pagination math).

Suppressed comments (1)

UI/Web/src/app/book-reader/_components/book-reader/book-reader.component.ts:1741

• pageWidth adds COLUMN_GAP, but the actual CSS column-gap for this component is defined in rem (1.25rem). If the root font size / text scaling changes, the JS math can drift from the real column gap and cause small horizontal misalignment/overflow. Consider reading the computed columnGap from the element instead of assuming 20px.

    const columnGapModifier = this.columnGapModifier();
    const bookContent = this.bookContentElemRef()?.nativeElement;
    if (this.readingSectionElemRef() == null || bookContent == null) return 0;

    return bookContent.clientWidth + (COLUMN_GAP * columnGapModifier);

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.