From 941b41d3dea42138c962e252696087111de8cc67 Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Thu, 9 Apr 2026 17:33:58 +0700
Subject: [PATCH] Fix label fitting on single DK-22210 page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Reduced padding (1.5mm → 1mm), barcode height (7mm → 6mm)
- Tighter line heights, combined serial/voltage on one line
- Barcode text size 14 → 12 to reduce image height
- Vertical flex layout instead of horizontal (no QR = more space)
- Should now fit within 29mm height without overflow

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/lib/server/barcode.ts                     |  2 +-
 .../(print)/print/component/[id]/+page.svelte | 30 +++++-------
 .../(print)/print/device/[id]/+page.svelte    | 49 +++++++++----------
 3 files changed, 38 insertions(+), 43 deletions(-)

diff --git a/src/lib/server/barcode.ts b/src/lib/server/barcode.ts
index 3606226..86fcd9c 100644
--- a/src/lib/server/barcode.ts
+++ b/src/lib/server/barcode.ts
@@ -8,7 +8,7 @@ export async function generateBarcodeSvg(text: string): Promise<string> {
 		scale: 3,
 		height: 8,
 		includetext: true,
-		textsize: 14,
+		textsize: 12,
 		textxalign: 'center'
 	});
 
diff --git a/src/routes/(print)/print/component/[id]/+page.svelte b/src/routes/(print)/print/component/[id]/+page.svelte
index b3f51a8..d650991 100644
--- a/src/routes/(print)/print/component/[id]/+page.svelte
+++ b/src/routes/(print)/print/component/[id]/+page.svelte
@@ -36,23 +36,19 @@
 </div>
 
 {#each Array(copies) as _}
-	<div class="label" style="width: 70mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1.5mm 2mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
-		<div style="display: flex; align-items: center; height: 100%; font-family: Arial, Helvetica, sans-serif;">
-			<div style="flex: 1; min-width: 0;">
-				<div style="font-size: 10pt; font-weight: bold; color: #000; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-					{data.component.title}
-				</div>
-				<div style="font-size: 7pt; color: #444; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-					{data.component.componentType}
-					{#if data.component.brand}&middot; {data.component.brand}{/if}
-				</div>
-				{#if data.component.partNumber}
-					<div style="font-size: 6pt; color: #666; margin-top: 0.3mm;">P/N: {data.component.partNumber}</div>
-				{/if}
-				<div style="margin-top: 1mm;">
-					<img src={data.barcodeDataUrl} alt={data.shortId}
-						style="height: 7mm; width: auto; max-width: 55mm; display: block;" />
-				</div>
+	<div class="label" style="width: 70mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm 2mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
+		<div style="display: flex; flex-direction: column; justify-content: center; height: 100%; font-family: Arial, Helvetica, sans-serif;">
+			<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+				{data.component.title}
+			</div>
+			<div style="font-size: 6pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+				{data.component.componentType}
+				{#if data.component.brand}&middot; {data.component.brand}{/if}
+				{#if data.component.partNumber} &middot; P/N: {data.component.partNumber}{/if}
+			</div>
+			<div style="margin-top: 0.5mm;">
+				<img src={data.barcodeDataUrl} alt={data.shortId}
+					style="height: 6mm; width: auto; max-width: 65mm; display: block;" />
 			</div>
 		</div>
 	</div>
diff --git a/src/routes/(print)/print/device/[id]/+page.svelte b/src/routes/(print)/print/device/[id]/+page.svelte
index 7e692e9..378c8a8 100644
--- a/src/routes/(print)/print/device/[id]/+page.svelte
+++ b/src/routes/(print)/print/device/[id]/+page.svelte
@@ -36,32 +36,31 @@
 </div>
 
 {#each Array(copies) as _}
-	<div class="label" style="width: 70mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1.5mm 2mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
-		<div style="display: flex; align-items: center; height: 100%; font-family: Arial, Helvetica, sans-serif;">
-			<div style="flex: 1; min-width: 0;">
-				<div style="font-size: 10pt; font-weight: bold; color: #000; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-					{data.device.title}
-				</div>
-				{#if data.device.brand || data.device.model}
-					<div style="font-size: 7pt; color: #444; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
-						{[data.device.brand, data.device.model].filter(Boolean).join(' ')}
-					</div>
-				{/if}
-				{#if data.device.serialNumber}
-					<div style="font-size: 6pt; color: #666; margin-top: 0.3mm;">
-						S/N: {data.device.serialNumber}
-					</div>
-				{/if}
-				{#if data.device.voltage || data.device.frequency}
-					<div style="font-size: 6pt; color: #666; margin-top: 0.3mm;">
-						{[data.device.voltage, data.device.frequency].filter(Boolean).join(' / ')}
-					</div>
-				{/if}
-				<div style="margin-top: 1mm;">
-					<img src={data.barcodeDataUrl} alt={data.shortId}
-						style="height: 7mm; width: auto; max-width: 55mm; display: block;" />
-				</div>
+	<div class="label" style="width: 70mm; height: 29mm; background: white; color: black; box-sizing: border-box; padding: 1mm 2mm; margin: 0 auto 8px auto; border: 1px dashed #ccc; overflow: hidden;">
+		<div style="display: flex; flex-direction: column; justify-content: center; height: 100%; font-family: Arial, Helvetica, sans-serif;">
+			<div style="font-size: 9pt; font-weight: bold; color: #000; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+				{data.device.title}
 			</div>
+			{#if data.device.brand || data.device.model}
+				<div style="font-size: 6pt; color: #444; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+					{[data.device.brand, data.device.model].filter(Boolean).join(' ')}
+				</div>
+			{/if}
+			{#if data.device.serialNumber}
+				<div style="font-size: 5pt; color: #666;">
+					S/N: {data.device.serialNumber}
+					{#if data.device.voltage} · {data.device.voltage}{/if}
+					{#if data.device.frequency} · {data.device.frequency}{/if}
+				</div>
+			{:else if data.device.voltage || data.device.frequency}
+				<div style="font-size: 5pt; color: #666;">
+					{[data.device.voltage, data.device.frequency].filter(Boolean).join(' · ')}
+				</div>
+			{/if}
+			<div style="margin-top: 0.5mm;">
+				<img src={data.barcodeDataUrl} alt={data.shortId}
+					style="height: 6mm; width: auto; max-width: 65mm; display: block;" />
+				</div>
 		</div>
 	</div>
 {/each}