fix(editor): remove page-break guide lines that crossed through text#69
Merged
Conversation
The editor painted a horizontal line every 912px via a repeating-linear-gradient background on .ProseMirror. Because it's a background image behind the text, the line drew *through* any text sitting at the 912px boundary, which read as a rule slashing through words. Quill is a continuous-scroll editor, not paginated, so the fix is removal, not repair. - Remove the repeating-linear-gradient from .ProseMirror; keep min-height: 912px purely as a layout minimum so an empty document keeps a page-sized surface. - Rename --page-break-gap to --editor-scroll-gap (same 40px value) so no token references the deleted feature. - Update the print-media comment that referenced the guide lines.
Capture why the page-break guide lines (a repeating-linear-gradient on .ProseMirror) drew through text and had to be removed rather than repaired: a fixed-pixel-interval background on a reflowing text surface has no awareness of line-box positions, so it slices whatever line lands on the 912px boundary. - docs/solutions/ui-bugs/page-break-guide-lines-slash-through-text.md — the bug-track solution doc (problem, symptoms, why removal not repair, the CSS-only fix, prevention). - CONCEPTS.md — new project glossary, seeded with the editor-styling terms this learning grounded (continuous-scroll editor, reflowing text surface, ProseMirror surface, suggesting mode, sidecar). - CLAUDE.md — Knowledge Stores section pointing future agents at docs/solutions/ and CONCEPTS.md. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
sam-powers
added a commit
that referenced
this pull request
Jul 10, 2026
Three small quality-of-life fixes from docs/to-improve/ (specs 10–12). Composer hints (spec 11): both comment composers now advertise the @claude affordance in their placeholder ("@claude to get an AI response") instead of the old Cmd+Enter / "type @claude to ask Claude" wording, so the AI path is discoverable at the point of writing. Wider reading measure (spec 12): trim --page-padding-x 96px → 64px, giving a ~688px measure (~85 chars) without changing the page footprint, so the wider text can't force horizontal scroll against the fixed comment column. The print block flattens the padding, so exported PDF stays US-Letter. Dead print rule (spec 10): drop the now-orphaned `.ProseMirror { background-image: none !important }` print-suppression rule — it suppressed the faux page-break gradient removed in #69, which no longer exists. Guard tests: two CSS/source-reading guards lock these end-states in. pageSurface.test.ts asserts neither .ProseMirror nor .editor-page paints a background-image/linear-gradient (page-break indicator stays gone) and that the widened measure holds, each with a negative control. composerPlaceholders.test.ts asserts every composer placeholder mentions @claude. Adds @types/node (devDep) so the file-reading guards typecheck. Claude-Session: https://claude.ai/code/session_01ESi6dnK3Wc1jYRpZN5qfZA Co-authored-by: Claude Opus 4.8 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
The editor used to paint a faint horizontal rule every 912px down the page — an attempt to suggest page boundaries. Because it was a
repeating-linear-gradientbackground behind the text (not spacing between blocks), the rule drew straight through any line of text that happened to sit on the 912px mark, so words got slashed by a horizontal line. Quill is a continuous-scroll editor, not a paginated one, so the cue added no real value and this removes it: no line is ever painted across or between document text again.The page card, its width/padding, and the empty-document minimum height are unchanged — only the guide-line gradient is gone. The
--page-break-gapvariable (plain 40px scroll spacing, nothing to do with the gradient) is renamed to--editor-scroll-gapat the same value, and the now-stale print-media comment is corrected, so nothing left in the CSS references a feature that no longer exists.Why the gradient failed
A fixed-pixel-interval background on a reflowing text surface has no awareness of where line boxes fall — as soon as font size, zoom, or window width shifts the text, some line lands on the boundary and the rule cuts through it. That's the reusable lesson: don't fake pagination with a fixed-interval background on a surface whose text reflows. (Captured as a compounding note in the plan for a future
docs/solutions/entry.)Verification
CSS-only change; verified without a paginated-rendering test suite:
grepconfirms zeropage-break/repeating-linear-gradientresidue remains insrc/.npm run buildsucceeds — CSS bundles cleanly with no parse or reference errors.e2e/export-pdf.spec.ts(3/3) passes in headless Chromium, confirming the print/PDF clean-copy path is intact under@media print.e2e/features.spec.ts(103/103) passes, exercising live.ProseMirrorrendering, zoom, and comment alignment with the gradient removed.Plan:
docs/plans/2026-07-07-001-fix-remove-page-break-guide-lines-plan.md