From a2382cf027827c45fd4d3dba1c9af5b2fd13c585 Mon Sep 17 00:00:00 2001
From: Vadym Samoilenko <vadymsamoilenko@oliver.agency>
Date: Thu, 5 Mar 2026 13:17:26 +0000
Subject: [PATCH] Fix PDF page breaks, badge alignment, and responsive layout

- PDFReport: Fix RagStatus badge padding (symmetric 4px top/bottom + lineHeight 1.2) so text is centered rather than floating at the top
- PDFReport: Add breakInside: 'avoid' to preview+summary grid, agent reviews grid, and li elements to prevent content being cut mid-sentence across PDF page breaks
- Campaigns: Lower two-column layout breakpoint from xl (1280px) to lg (1024px) so laptop screens show side-by-side proof detail view
- Campaigns: Add flex-wrap to button row so Download Proof / Download Report / New Version buttons wrap gracefully on smaller screens

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/components/Campaigns.tsx |  6 +++---
 frontend/components/PDFReport.tsx | 10 +++++-----
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/frontend/components/Campaigns.tsx b/frontend/components/Campaigns.tsx
index 8451a70..366fee9 100755
--- a/frontend/components/Campaigns.tsx
+++ b/frontend/components/Campaigns.tsx
@@ -1701,7 +1701,7 @@ const ProofDetailView: React.FC<{
                 </div>
             </header>
 
-             <div className="max-w-screen-2xl mx-auto grid grid-cols-1 xl:grid-cols-3 gap-x-12">
+             <div className="max-w-screen-2xl mx-auto grid grid-cols-1 lg:grid-cols-3 gap-x-12">
                 <div className="lg:col-span-1">
                     <div className="sticky top-8 flex flex-col gap-y-6">
                         <div>
@@ -1721,7 +1721,7 @@ const ProofDetailView: React.FC<{
                                     <HistoryIcon className="h-6 w-6 text-oliver-azure"/>
                                     Version History
                                 </h3>
-                                <div className="flex items-center gap-2">
+                                <div className="flex flex-wrap items-center gap-2">
                                     <button
                                         onClick={handleDownload}
                                         className="flex items-center gap-2 text-sm bg-oliver-azure text-white font-semibold py-1.5 px-3 rounded-full border border-transparent hover:bg-oliver-azure/90 hover:shadow-sm active:scale-95 active:bg-oliver-azure/80 transition-all duration-150 shrink-0 whitespace-nowrap"
@@ -1803,7 +1803,7 @@ const ProofDetailView: React.FC<{
                         </div>
                     </div>
                 </div>
-                <div className="mt-12 xl:mt-0 xl:col-span-2">
+                <div className="mt-8 lg:mt-0 lg:col-span-2">
                     {selectedVersion.isIdenticalFile && (
                         <div className="mb-6 bg-warning-light border border-warning rounded-[10px] p-4 flex items-start gap-3">
                             <ExclamationTriangleIcon className="w-5 h-5 text-warning flex-shrink-0 mt-0.5" />
diff --git a/frontend/components/PDFReport.tsx b/frontend/components/PDFReport.tsx
index 715c040..9f78d8a 100755
--- a/frontend/components/PDFReport.tsx
+++ b/frontend/components/PDFReport.tsx
@@ -76,7 +76,7 @@ const formatFeedbackTextForPDF = (text: string): React.ReactNode => {
             {bulletGroups.length > 0 && (
                 <ul style={{ margin: 0, paddingLeft: '20px', listStyleType: 'disc', listStylePosition: 'outside' }}>
                     {bulletGroups.map((group, index) => (
-                        <li key={index} style={{ marginBottom: '8px', lineHeight: '1.5' }}>
+                        <li key={index} style={{ marginBottom: '8px', lineHeight: '1.5', breakInside: 'avoid' }}>
                             {group.map((line, lineIdx) => (
                                 <React.Fragment key={lineIdx}>
                                     {lineIdx > 0 && <br />}
@@ -102,7 +102,7 @@ const RagStatusBadge: React.FC<{ status: RagStatus }> = ({ status }) => {
     }
 
     return (
-        <span style={{ backgroundColor: bgColor, borderRadius: '9999px', display: 'inline-block', minWidth: '50px', paddingLeft: '12px', paddingRight: '12px', paddingTop: '0', paddingBottom: '13px', textAlign: 'center', color: textColor, fontSize: '12px', fontWeight: 'bold' }}>
+        <span style={{ backgroundColor: bgColor, borderRadius: '9999px', display: 'inline-block', minWidth: '50px', paddingLeft: '12px', paddingRight: '12px', paddingTop: '4px', paddingBottom: '4px', lineHeight: '1.2', textAlign: 'center', color: textColor, fontSize: '12px', fontWeight: 'bold' }}>
             {status}
         </span>
     );
@@ -182,7 +182,7 @@ export const PDFReport: React.FC<PDFReportProps> = ({ campaignName, proofs, base
                         </div>
                         
                         {/* Preview & Summary */}
-                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10mm', marginBottom: '10mm' }}>
+                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10mm', marginBottom: '10mm', breakInside: 'avoid' }}>
                             <div style={{ border: '1px solid #ccc', padding: '4px', background: '#f8f8f8' }}>
                                 <img src={version.proofPreviewUrl} alt="Proof Preview" style={{ width: '100%', objectFit: 'contain' }} />
                             </div>
@@ -200,7 +200,7 @@ export const PDFReport: React.FC<PDFReportProps> = ({ campaignName, proofs, base
                         </div>
 
                         {/* Detailed Agent Feedback */}
-                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8mm' }}>
+                        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8mm', breakInside: 'avoid' }}>
                             {agentReviews.map(({ title, review, icon }) => (
                                 <div key={title} style={{ border: '1px solid #e5e5e5', borderRadius: '4px', padding: '5mm', backgroundColor: '#fff', breakInside: 'avoid', pageBreakInside: 'avoid' }}>
                                     <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '10px' }}>
@@ -214,7 +214,7 @@ export const PDFReport: React.FC<PDFReportProps> = ({ campaignName, proofs, base
                                         <div>
                                             <h5 style={{ fontSize: '13px', fontWeight: 'bold', margin: '0 0 5px 0' }}>Key Actions:</h5>
                                             <ul style={{ margin: 0, paddingLeft: '20px', fontSize: '12px', lineHeight: 1.5, listStyleType: 'disc', listStylePosition: 'outside' }}>
-                                                {review.issues.map((issue, i) => <li key={i} style={{ marginBottom: '4px', lineHeight: '1.5' }}>{issue}</li>)}
+                                                {review.issues.map((issue, i) => <li key={i} style={{ marginBottom: '4px', lineHeight: '1.5', breakInside: 'avoid' }}>{issue}</li>)}
                                             </ul>
                                         </div>
                                     )}