From fc4d5d8c56ba2b513cc9bb3c17c94b2f69873074 Mon Sep 17 00:00:00 2001
From: Sharang Parnerkar <30073382+mighty840@users.noreply.github.com>
Date: Tue, 12 May 2026 17:45:46 +0200
Subject: [PATCH] fix(pitch-deck): use imported CSS for print styles instead of
 inline style tag
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 .../[versionId]/_components/PrintDeck.tsx     | 29 --------------
 pitch-deck/app/pitch-print/layout.tsx         |  5 +++
 pitch-deck/app/pitch-print/print.css          | 38 +++++++++++++++++++
 3 files changed, 43 insertions(+), 29 deletions(-)
 create mode 100644 pitch-deck/app/pitch-print/layout.tsx
 create mode 100644 pitch-deck/app/pitch-print/print.css
diff --git a/pitch-deck/app/pitch-print/[versionId]/_components/PrintDeck.tsx b/pitch-deck/app/pitch-print/[versionId]/_components/PrintDeck.tsx
index 70b65f0..621424c 100644
--- a/pitch-deck/app/pitch-print/[versionId]/_components/PrintDeck.tsx
+++ b/pitch-deck/app/pitch-print/[versionId]/_components/PrintDeck.tsx
@@ -30,35 +30,6 @@ export default function PrintDeck({ pitchData, versionName, fmResults, fmAssumpt
 
   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 */}
       <div className="no-print" style={{
         position: 'sticky', top: 0, zIndex: 100,
diff --git a/pitch-deck/app/pitch-print/layout.tsx b/pitch-deck/app/pitch-print/layout.tsx
new file mode 100644
index 0000000..0443f73
--- /dev/null
+++ b/pitch-deck/app/pitch-print/layout.tsx
@@ -0,0 +1,5 @@
+import './print.css'
+
+export default function PrintLayout({ children }: { children: React.ReactNode }) {
+  return <>{children}</>
+}
diff --git a/pitch-deck/app/pitch-print/print.css b/pitch-deck/app/pitch-print/print.css
new file mode 100644
index 0000000..6c897bf
--- /dev/null
+++ b/pitch-deck/app/pitch-print/print.css
@@ -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;
+  }
+}
