From 8ba0f01e20e7f9c25f23d1ea70e9977935a4fd2e Mon Sep 17 00:00:00 2001
From: michael <michael@modernfreedom.com>
Date: Tue, 27 Jan 2026 15:09:14 -0600
Subject: [PATCH] Use table/table-cell display for reliable vertical centering

Wrap text in nested spans using display: inline-table on outer
and display: table-cell with vertical-align: middle on inner.
This is a classic centering technique that html2canvas should handle.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 frontend/components/PDFReport.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/frontend/components/PDFReport.tsx b/frontend/components/PDFReport.tsx
index 9b881d9..e11ab38 100755
--- a/frontend/components/PDFReport.tsx
+++ b/frontend/components/PDFReport.tsx
@@ -75,8 +75,10 @@ const RagStatusBadge: React.FC<{ status: RagStatus }> = ({ status }) => {
     }
 
     return (
-        <span style={{ backgroundColor: bgColor, color: textColor, borderRadius: '9999px', fontSize: '12px', fontWeight: 'bold', display: 'inline-block', minWidth: '50px', textAlign: 'center', height: '24px', lineHeight: '24px', verticalAlign: 'middle', paddingLeft: '12px', paddingRight: '12px', paddingTop: '0', paddingBottom: '0', boxSizing: 'border-box' }}>
-            {status}
+        <span style={{ backgroundColor: bgColor, borderRadius: '9999px', display: 'inline-table', height: '22px', minWidth: '50px', paddingLeft: '12px', paddingRight: '12px' }}>
+            <span style={{ display: 'table-cell', verticalAlign: 'middle', textAlign: 'center', color: textColor, fontSize: '12px', fontWeight: 'bold' }}>
+                {status}
+            </span>
         </span>
     );
 };