Benjamin_Boenisch/breakpilot-core
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix(pitch-deck): use imported CSS for print styles instead of inline style tag

Browse Source 
Inline <style> tags in React body are unreliable for @media print in
Chrome. Move all print CSS to app/pitch-print/print.css imported via
a layout.tsx — Next.js injects this as a proper <link> in <head>,
which is guaranteed to be applied before print rendering.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Sharang Parnerkar
2026-05-12 17:45:46 +02:00
parent cf18b1074a
commit fc4d5d8c56
3 changed files with 43 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pitch-deck/app/pitch-print/[versionId]/_components/PrintDeck.tsx
-29
View File
@@ -30,35 +30,6 @@ export default function PrintDeck({ pitchData, versionName, fmResults, fmAssumpt
return ( return (
<> <>
<style>{`
@media print {
@page { size: A4 landscape; margin: 0; }
body { margin: 0; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.no-print { display: none !important; }
.print-page {
page-break-after: always !important;
break-after: page !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
margin: 0 !important;
box-shadow: none !important;
width: 297mm !important;
height: 210mm !important;
}
.print-page-cover {
page-break-after: always !important;
break-after: page !important;
margin: 0 !important;
box-shadow: none !important;
}
.print-deck-wrapper { padding: 0 !important; }
}
@media screen {
body { background: #d1d5db; }
}
* { box-sizing: border-box; }
`}</style>
{/* Toolbar — screen only */} {/* Toolbar — screen only */}
<div className="no-print" style={{ <div className="no-print" style={{
position: 'sticky', top: 0, zIndex: 100, position: 'sticky', top: 0, zIndex: 100,
pitch-deck/app/pitch-print/layout.tsx
+5
View File
@@ -0,0 +1,5 @@
import './print.css'
export default function PrintLayout({ children }: { children: React.ReactNode }) {
return <>{children}</>
}
pitch-deck/app/pitch-print/print.css
+38
View File
@@ -0,0 +1,38 @@
@media screen {
body { background: #d1d5db; }
}
@media print {
@page {
size: A4 landscape;
margin: 0;
}
body {
margin: 0;
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
.no-print {
display: none !important;
}
.print-deck-wrapper {
padding: 0 !important;
margin: 0 !important;
}
.print-page {
page-break-after: always !important;
break-after: page !important;
page-break-inside: avoid !important;
break-inside: avoid !important;
margin: 0 !important;
box-shadow: none !important;
width: 297mm !important;
height: 210mm !important;
display: flex !important;
flex-direction: column !important;
}
}