wip

scripts/pdf/react-pdf/styles.ts

@@ -1,4 +1,8 @@
-import { StyleSheet } from '@react-pdf/renderer';
+import { Font, StyleSheet } from '@react-pdf/renderer';
+
+// Prevent automatic word hyphenation, which can create multi-line table headers
+// even when we try to keep them single-line.
+Font.registerHyphenationCallback(word => [word]);
 
 export const COLORS = {
   navy: '#0E2A47',
@@ -76,6 +80,10 @@ export const styles = StyleSheet.create({
     padding: 14,
     marginBottom: 14,
   },
+  sectionPlain: {
+    paddingVertical: 2,
+    marginBottom: 12,
+  },
   sectionTitle: {
     fontSize: 10,
     fontWeight: 700,
@@ -86,34 +94,56 @@ export const styles = StyleSheet.create({
   body: { fontSize: 10, lineHeight: 1.5, color: COLORS.darkGray },
 
   kvGrid: {
+    width: '100%',
     borderWidth: 1,
     borderColor: COLORS.lightGray,
   },
-  kvRow: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: COLORS.lightGray },
+  kvRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.lightGray,
+  },
   kvRowLast: { borderBottomWidth: 0 },
-  kvLabel: {
-    width: '45%',
-    paddingVertical: 6,
-    paddingHorizontal: 8,
-    backgroundColor: COLORS.almostWhite,
+  kvCell: { paddingVertical: 6, paddingHorizontal: 8 },
+  // Visual separator between (label,value) pairs in the 4-col KV grid.
+  // Matches the engineering-table look and improves scanability.
+  kvMidDivider: {
     borderRightWidth: 1,
     borderRightColor: COLORS.lightGray,
   },
-  kvValue: { width: '55%', paddingVertical: 6, paddingHorizontal: 8 },
   kvLabelText: { fontSize: 8.5, fontWeight: 700, color: COLORS.mediumGray },
   kvValueText: { fontSize: 9.5, color: COLORS.darkGray },
 
-  tableWrap: { borderWidth: 1, borderColor: COLORS.lightGray },
-  tableHeader: { flexDirection: 'row', backgroundColor: '#6B707A' },
+  tableWrap: { width: '100%', borderWidth: 1, borderColor: COLORS.lightGray },
+  tableHeader: {
+    width: '100%',
+    flexDirection: 'row',
+    backgroundColor: '#FFFFFF',
+    borderBottomWidth: 1,
+    borderBottomColor: COLORS.lightGray,
+  },
   tableHeaderCell: {
     paddingVertical: 5,
     paddingHorizontal: 4,
     fontSize: 6.6,
     fontWeight: 700,
-    color: '#FFFFFF',
+    color: COLORS.navy,
   },
-  tableRow: { flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: COLORS.lightGray },
+  tableHeaderCellCfg: {
+    paddingHorizontal: 6,
+  },
+  tableHeaderCellDivider: {
+    borderRightWidth: 1,
+    borderRightColor: COLORS.lightGray,
+  },
+  tableRow: { width: '100%', flexDirection: 'row', borderBottomWidth: 1, borderBottomColor: COLORS.lightGray },
   tableRowAlt: { backgroundColor: COLORS.almostWhite },
   tableCell: { paddingVertical: 4, paddingHorizontal: 4, fontSize: 6.6, color: COLORS.darkGray },
+  tableCellCfg: {
+    paddingHorizontal: 6,
+  },
+  tableCellDivider: {
+    borderRightWidth: 1,
+    borderRightColor: COLORS.lightGray,
+  },
 });
-