From 0cecc7208f9a4c036ef86aa1d96ef324348539f2 Mon Sep 17 00:00:00 2001 From: SJCoetz Date: Mon, 3 Aug 2026 19:06:39 +0200 Subject: [PATCH] =?UTF-8?q?polish(stocktake-pdf):=20widen=20SKU=E2=86=92Na?= =?UTF-8?q?me=20gap=20so=20the=20separation=20is=20visible?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The previous 2% gapSkUName was too subtle to read as a column separator — it was being absorbed by the empty space at the end of the SKU column. Bumping to 4% (and trimming Name from 30% to 28% to keep the total at 100%) makes the gap clearly visible regardless of how long the SKU text is. Co-authored-by: Orca --- src/lib/pdf/stock-item-stocktake-document.tsx | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/lib/pdf/stock-item-stocktake-document.tsx b/src/lib/pdf/stock-item-stocktake-document.tsx index abbd46d..325451c 100644 --- a/src/lib/pdf/stock-item-stocktake-document.tsx +++ b/src/lib/pdf/stock-item-stocktake-document.tsx @@ -57,15 +57,15 @@ const styles = StyleSheet.create({ tdStatus: { fontSize: 9, fontFamily: "Helvetica-Bold", textAlign: "right" }, // The empty `gap*` styles are intentional separator columns. React- // pdf's flexbox doesn't support per-child gaps, so we render the - // gaps as zero-content `` elements. The small gap between SKU - // and Name visually separates the identifier from the label; the - // larger gaps between Name/Supplier/Current/Min/Max push the numeric + // gaps as zero-content `` elements. The gap between SKU and + // Name visually separates the identifier from the label; the equal + // 4% gaps between Name/Supplier/Current/Min/Max push the numeric // columns further to the right so the eye groups {SKU, Name, // Supplier} as "what" and {Current, Min, Max, Status} as "how much // / how urgent". cSku: { width: "6%" }, - gapSkuName: { width: "2%" }, - cName: { width: "30%" }, + gapSkuName: { width: "4%" }, + cName: { width: "28%" }, gapNameSupplier: { width: "4%" }, cSupplier: { width: "11%" }, gapSupplierCurrent: { width: "4%" },