Oliver/modcomms
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix PDF page breaks, badge alignment, and responsive layout

Browse source 
- 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>
This commit is contained in:
Vadym Samoilenko 2026-03-05 13:17:26 +00:00
parent fdb5a2d961
commit a2382cf027
2 changed files with 8 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
frontend/components/Campaigns.tsx
View file

@ -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" />

10
frontend/components/PDFReport.tsx
View file

@ -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>
)}