diff --git a/apps/web/src/styles/note-print.css b/apps/web/src/styles/note-print.css index 87c33e88..4942cc95 100644 --- a/apps/web/src/styles/note-print.css +++ b/apps/web/src/styles/note-print.css @@ -370,21 +370,18 @@ font-family: var(--editor-body-font-family, var(--edgeever-system-font-family)); } +/* The wrapper is only a scroll frame in the editor. Keeping that box in print + * makes paged.js move the whole table to the next page. */ .edgeever-print-content .tableWrapper { - max-width: 100%; - margin: 1.25rem 0; - overflow: hidden; - border: 1px solid rgb(212 212 212 / 0.7); - border-radius: 6px; - background: #fff; + display: contents; } .edgeever-print-content table { width: 100%; margin: 1.25rem 0; - border-collapse: separate; - border-spacing: 0; + border-collapse: collapse; line-height: 1.45; + break-inside: auto; } .edgeever-print-content .tableWrapper table { @@ -393,32 +390,27 @@ .edgeever-print-content thead { display: table-header-group; + break-inside: auto; +} + +.edgeever-print-content tbody { + break-inside: auto; } .edgeever-print-content tr { - break-inside: avoid-page; + break-inside: avoid; } .edgeever-print-content th, .edgeever-print-content td { - border: 0; - border-right: 1px solid rgb(229 229 229 / 0.8); - border-bottom: 1px solid rgb(229 229 229 / 0.8); + break-inside: avoid; + border: 1px solid rgb(229 229 229 / 0.8); padding: 0.48rem 0.8rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; } -.edgeever-print-content th:last-child, -.edgeever-print-content td:last-child { - border-right: 0; -} - -.edgeever-print-content tr:last-child td { - border-bottom: 0; -} - .edgeever-print-content th { background: rgb(245 245 245 / 0.75); color: #181818; diff --git a/apps/web/src/styles/note-print.test.mjs b/apps/web/src/styles/note-print.test.mjs index adc3f074..3984a17f 100644 --- a/apps/web/src/styles/note-print.test.mjs +++ b/apps/web/src/styles/note-print.test.mjs @@ -23,4 +23,11 @@ describe("note print page margin", () => { expect(css).not.toContain("#172033"); expect(css).not.toContain("#0f172a"); }); + + test("lets a long table continue on the same page", () => { + expect(css).toMatch(/\.edgeever-print-content \.tableWrapper\s*\{[^}]*display:\s*contents;/s); + expect(css).toMatch(/\.edgeever-print-content table\s*\{[^}]*break-inside:\s*auto;/s); + expect(css).toMatch(/\.edgeever-print-content tr\s*\{[^}]*break-inside:\s*avoid;/s); + expect(css).not.toMatch(/\.tableWrapper\s*\{[^}]*overflow:\s*hidden;/s); + }); });