wip

lib/pdf-datasheet.tsx

@@ -21,7 +21,13 @@ Font.register({
 // Industrial/technical/restrained design - STYLEGUIDE.md compliant
 const styles = StyleSheet.create({
   page: {
-    padding: 72, // Large margins for engineering documentation feel
+    // Large margins for engineering documentation feel.
+    // Extra bottom padding reserves space for the fixed footer so content
+    // (esp. long descriptions) doesn't render underneath it.
+    paddingTop: 72,
+    paddingLeft: 72,
+    paddingRight: 72,
+    paddingBottom: 140,
     fontFamily: 'Helvetica',
     fontSize: 10,
     color: '#1F2933', // Dark gray text
@@ -165,12 +171,15 @@ const styles = StyleSheet.create({
   // Cross-section table - engineering specification style
   table: {
     marginTop: 16,
+    borderWidth: 1,
+    borderColor: '#E6E9ED',
   },
 
   tableHeader: {
     flexDirection: 'row',
     backgroundColor: '#E6E9ED',
-    borderBottom: '1px solid #E6E9ED',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E6E9ED',
   },
 
   tableHeaderCell: {
@@ -183,9 +192,19 @@ const styles = StyleSheet.create({
     letterSpacing: 0.3,
   },
 
+  tableHeaderCellLast: {
+    borderRightWidth: 0,
+  },
+
+  tableHeaderCellWithDivider: {
+    borderRightWidth: 1,
+    borderRightColor: '#E6E9ED',
+  },
+
   tableRow: {
     flexDirection: 'row',
-    borderBottom: '1px solid #F8F9FA',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E6E9ED',
   },
 
   tableCell: {
@@ -195,6 +214,15 @@ const styles = StyleSheet.create({
     color: '#1F2933',
   },
 
+  tableCellLast: {
+    borderRightWidth: 0,
+  },
+
+  tableCellWithDivider: {
+    borderRightWidth: 1,
+    borderRightColor: '#E6E9ED',
+  },
+
   tableRowAlt: {
     backgroundColor: '#F8F9FA',
   },
@@ -209,7 +237,54 @@ const styles = StyleSheet.create({
   specsGrid: {
     flexDirection: 'row',
     flexWrap: 'wrap',
-    justifyContent: 'space-between',
+  },
+
+  // Technical data table (used for the metagrid)
+  specsTable: {
+    borderWidth: 1,
+    borderColor: '#E6E9ED',
+  },
+
+  specsTableRow: {
+    flexDirection: 'row',
+    borderBottomWidth: 1,
+    borderBottomColor: '#E6E9ED',
+  },
+
+  specsTableRowLast: {
+    borderBottomWidth: 0,
+  },
+
+  specsTableLabelCell: {
+    flex: 3,
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+    backgroundColor: '#F8F9FA',
+    borderRightWidth: 1,
+    borderRightColor: '#E6E9ED',
+    justifyContent: 'center',
+  },
+
+  specsTableValueCell: {
+    flex: 4,
+    paddingVertical: 8,
+    paddingHorizontal: 8,
+    justifyContent: 'center',
+  },
+
+  specsTableLabelText: {
+    fontSize: 9,
+    fontWeight: 700,
+    color: '#0E2A47',
+    textTransform: 'uppercase',
+    letterSpacing: 0.3,
+    lineHeight: 1.2,
+  },
+
+  specsTableValueText: {
+    fontSize: 10,
+    color: '#1F2933',
+    lineHeight: 1.4,
   },
 
   specColumn: {
@@ -391,13 +466,24 @@ export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
         {product.attributes && product.attributes.length > 0 && (
           <View style={styles.section}>
             <Text style={styles.sectionTitle}>{labels.specifications}</Text>
-            <View style={styles.specsGrid}>
+            <View style={styles.specsTable}>
               {product.attributes.map((attr, index) => (
-                <View key={index} style={styles.specItem}>
-                  <Text style={styles.specLabel}>{attr.name}</Text>
-                  <Text style={styles.specValue}>
-                    {attr.options.join(', ')}
-                  </Text>
+                <View
+                  key={index}
+                  style={[
+                    styles.specsTableRow,
+                    index === product.attributes.length - 1 &&
+                      styles.specsTableRowLast,
+                  ]}
+                >
+                  <View style={styles.specsTableLabelCell}>
+                    <Text style={styles.specsTableLabelText}>{attr.name}</Text>
+                  </View>
+                  <View style={styles.specsTableValueCell}>
+                    <Text style={styles.specsTableValueText}>
+                      {attr.options.join(', ')}
+                    </Text>
+                  </View>
                 </View>
               ))}
             </View>
@@ -419,7 +505,7 @@ export const PDFDatasheet: React.FC<PDFDatasheetProps> = ({
         )}
 
         {/* Minimal footer */}
-        <View style={styles.footer}>
+        <View style={styles.footer} fixed>
           <Text style={styles.footerLeft}>
             {labels.sku}: {product.sku}
           </Text>