From f3e54180f0b2e6cc5062b3c31857855c7bf28279 Mon Sep 17 00:00:00 2001
From: Sharang Parnerkar <30073382+mighty840@users.noreply.github.com>
Date: Tue, 12 May 2026 18:16:13 +0200
Subject: [PATCH] fix(print): wrap flex pages in block container to fix Chrome
 page breaks

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>
---
 .../_components/PrintCoreSlides.tsx           |  2 ++
 .../[versionId]/_components/PrintLayout.tsx   |  2 ++
 pitch-deck/app/pitch-print/print.css          | 24 +++++++++++++++----
 3 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/pitch-deck/app/pitch-print/[versionId]/_components/PrintCoreSlides.tsx b/pitch-deck/app/pitch-print/[versionId]/_components/PrintCoreSlides.tsx
index b7d6b5d..08e4c3e 100644
--- a/pitch-deck/app/pitch-print/[versionId]/_components/PrintCoreSlides.tsx
+++ b/pitch-deck/app/pitch-print/[versionId]/_components/PrintCoreSlides.tsx
@@ -31,6 +31,7 @@ export function PrintCoverPage({ company, funding, versionName, lang }: { compan
   const de = lang === 'de'
   const instrument = funding?.instrument || 'Pre-Seed'
   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 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>
@@ -70,6 +71,7 @@ export function PrintCoverPage({ company, funding, versionName, lang }: { compan
         </span>
       </div>
     </div>
+    </div>
   )
 }
 
diff --git a/pitch-deck/app/pitch-print/[versionId]/_components/PrintLayout.tsx b/pitch-deck/app/pitch-print/[versionId]/_components/PrintLayout.tsx
index 69a17d1..4adf377 100644
--- a/pitch-deck/app/pitch-print/[versionId]/_components/PrintLayout.tsx
+++ b/pitch-deck/app/pitch-print/[versionId]/_components/PrintLayout.tsx
@@ -17,6 +17,7 @@ interface PrintPageProps {
 
 export function PrintPage({ title, pageNum, totalPages, versionName, children }: PrintPageProps) {
   return (
+    <div className="print-page-break">
     <div className="print-page" style={{
       width: '297mm',
       minHeight: '210mm',
@@ -75,6 +76,7 @@ export function PrintPage({ title, pageNum, totalPages, versionName, children }:
         <span style={{ fontSize: '9px', color: TEXT_LIGHT }}>{pageNum} / {totalPages}</span>
       </div>
     </div>
+    </div>
   )
 }
 
diff --git a/pitch-deck/app/pitch-print/print.css b/pitch-deck/app/pitch-print/print.css
index 6c897bf..d0bb374 100644
--- a/pitch-deck/app/pitch-print/print.css
+++ b/pitch-deck/app/pitch-print/print.css
@@ -8,8 +8,9 @@
     margin: 0;
   }
 
-  body {
-    margin: 0;
+  html, body {
+    margin: 0 !important;
+    padding: 0 !important;
     -webkit-print-color-adjust: exact;
     print-color-adjust: exact;
   }
@@ -21,18 +22,33 @@
   .print-deck-wrapper {
     padding: 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;
     break-after: page !important;
     page-break-inside: avoid !important;
     break-inside: avoid !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;
     height: 210mm !important;
     display: flex !important;
     flex-direction: column !important;
+    overflow: visible !important;
+    margin: 0 !important;
+    box-shadow: none !important;
   }
 }