fix(print): wrap flex pages in block container to fix Chrome page breaks
Build pitch-deck / build-push-deploy (push) Successful in 1m38s
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 31s
CI / test-python-voice (push) Successful in 31s
CI / test-bqas (push) Successful in 32s
Build pitch-deck / build-push-deploy (push) Successful in 1m38s
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-consent (push) Successful in 31s
CI / test-python-voice (push) Successful in 31s
CI / test-bqas (push) Successful in 32s
Chrome's print engine silently ignores break-after/page-break-after on flex containers. Wrapping each .print-page (flex) in a plain block .print-page-break element gives Chrome a reliable page break anchor. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -31,6 +31,7 @@ export function PrintCoverPage({ company, funding, versionName, lang }: { compan
|
|||||||
const de = lang === 'de'
|
const de = lang === 'de'
|
||||||
const instrument = funding?.instrument || 'Pre-Seed'
|
const instrument = funding?.instrument || 'Pre-Seed'
|
||||||
return (
|
return (
|
||||||
|
<div className="print-page-break">
|
||||||
<div className="print-page" style={{ width: '297mm', height: '210mm', backgroundColor: '#ffffff', display: 'flex', flexDirection: 'column', fontFamily: 'system-ui, -apple-system, sans-serif', boxSizing: 'border-box', margin: '0 auto 32px', boxShadow: '0 4px 24px rgba(0,0,0,0.12)', overflow: 'hidden' }}>
|
<div className="print-page" style={{ width: '297mm', height: '210mm', backgroundColor: '#ffffff', display: 'flex', flexDirection: 'column', fontFamily: 'system-ui, -apple-system, sans-serif', boxSizing: 'border-box', margin: '0 auto 32px', boxShadow: '0 4px 24px rgba(0,0,0,0.12)', overflow: 'hidden' }}>
|
||||||
<div style={{ height: '80px', background: 'linear-gradient(135deg, #4f46e5, #7c3aed)', WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact', display: 'flex', alignItems: 'center', padding: '0 32px', gap: '16px', flexShrink: 0 }}>
|
<div style={{ height: '80px', background: 'linear-gradient(135deg, #4f46e5, #7c3aed)', WebkitPrintColorAdjust: 'exact', printColorAdjust: 'exact', display: 'flex', alignItems: 'center', padding: '0 32px', gap: '16px', flexShrink: 0 }}>
|
||||||
<span style={{ color: '#fff', fontWeight: 800, fontSize: '30px', letterSpacing: '-0.01em' }}>BreakPilot</span>
|
<span style={{ color: '#fff', fontWeight: 800, fontSize: '30px', letterSpacing: '-0.01em' }}>BreakPilot</span>
|
||||||
@@ -70,6 +71,7 @@ export function PrintCoverPage({ company, funding, versionName, lang }: { compan
|
|||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ interface PrintPageProps {
|
|||||||
|
|
||||||
export function PrintPage({ title, pageNum, totalPages, versionName, children }: PrintPageProps) {
|
export function PrintPage({ title, pageNum, totalPages, versionName, children }: PrintPageProps) {
|
||||||
return (
|
return (
|
||||||
|
<div className="print-page-break">
|
||||||
<div className="print-page" style={{
|
<div className="print-page" style={{
|
||||||
width: '297mm',
|
width: '297mm',
|
||||||
minHeight: '210mm',
|
minHeight: '210mm',
|
||||||
@@ -75,6 +76,7 @@ export function PrintPage({ title, pageNum, totalPages, versionName, children }:
|
|||||||
<span style={{ fontSize: '9px', color: TEXT_LIGHT }}>{pageNum} / {totalPages}</span>
|
<span style={{ fontSize: '9px', color: TEXT_LIGHT }}>{pageNum} / {totalPages}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -8,8 +8,9 @@
|
|||||||
margin: 0;
|
margin: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
body {
|
html, body {
|
||||||
margin: 0;
|
margin: 0 !important;
|
||||||
|
padding: 0 !important;
|
||||||
-webkit-print-color-adjust: exact;
|
-webkit-print-color-adjust: exact;
|
||||||
print-color-adjust: exact;
|
print-color-adjust: exact;
|
||||||
}
|
}
|
||||||
@@ -21,18 +22,33 @@
|
|||||||
.print-deck-wrapper {
|
.print-deck-wrapper {
|
||||||
padding: 0 !important;
|
padding: 0 !important;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
|
display: block !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.print-page {
|
/* Block wrapper handles page breaks — flex containers break unreliably in Chrome */
|
||||||
|
.print-page-break {
|
||||||
|
display: block !important;
|
||||||
page-break-after: always !important;
|
page-break-after: always !important;
|
||||||
break-after: page !important;
|
break-after: page !important;
|
||||||
page-break-inside: avoid !important;
|
page-break-inside: avoid !important;
|
||||||
break-inside: avoid !important;
|
break-inside: avoid !important;
|
||||||
margin: 0 !important;
|
margin: 0 !important;
|
||||||
box-shadow: none !important;
|
padding: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.print-page-break:last-child {
|
||||||
|
page-break-after: auto !important;
|
||||||
|
break-after: auto !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Flex container for internal layout only — no break properties here */
|
||||||
|
.print-page {
|
||||||
width: 297mm !important;
|
width: 297mm !important;
|
||||||
height: 210mm !important;
|
height: 210mm !important;
|
||||||
display: flex !important;
|
display: flex !important;
|
||||||
flex-direction: column !important;
|
flex-direction: column !important;
|
||||||
|
overflow: visible !important;
|
||||||
|
margin: 0 !important;
|
||||||
|
box-shadow: none !important;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user