From 7095b68169d02f83f1b518046ba08898bce20caa Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Tue, 7 Apr 2026 11:36:43 +0700
Subject: [PATCH] Switch label printing to DK-1201 (29mm x 90.3mm) horizontal
 layout

QR code on the left, text and barcode on the right. Fits the pre-cut
DK-1201 address label format.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../(app)/components/[id]/print/+page.svelte  | 51 ++++++++----------
 .../(app)/devices/[id]/print/+page.svelte     | 53 +++++++++----------
 2 files changed, 47 insertions(+), 57 deletions(-)

diff --git a/src/routes/(app)/components/[id]/print/+page.svelte b/src/routes/(app)/components/[id]/print/+page.svelte
index 397ce32..cee0cf5 100644
--- a/src/routes/(app)/components/[id]/print/+page.svelte
+++ b/src/routes/(app)/components/[id]/print/+page.svelte
@@ -20,7 +20,7 @@
 	<title>Print Label - {data.component.title}</title>
 	<style>
 		@page {
-			size: 29mm auto;
+			size: 90.3mm 29mm;
 			margin: 1mm;
 		}
 		@media print {
@@ -37,7 +37,8 @@
 		@media screen {
 			.label-preview {
 				border: 1px dashed #ccc;
-				width: 29mm;
+				width: 90.3mm;
+				height: 29mm;
 				background: white;
 			}
 		}
@@ -61,7 +62,7 @@
 	</div>
 
 	<div class="mb-2 rounded-md bg-gray-100 p-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400">
-		<strong>Printer setup:</strong> Select your Brother printer, paper size "DK-22210 (29mm)" or "29mm" roll. Set margins to minimum.
+		<strong>Printer setup:</strong> Select your Brother printer, paper size "DK-1201" (29mm x 90.3mm). Set margins to minimum.
 	</div>
 
 	<p class="mb-4 text-sm text-gray-500 dark:text-gray-400">Preview ({copies} label{copies > 1 ? 's' : ''}):</p>
@@ -69,37 +70,31 @@
 
 {#each Array(copies) as _, i}
 	<div class="print-container label-preview mx-auto mb-2 p-1">
-		<div class="text-center" style="font-family: Arial, Helvetica, sans-serif;">
-			<div style="font-size: 8pt; font-weight: bold; line-height: 1.2; margin-bottom: 1mm;">
-				{data.component.title}
+		<div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: Arial, Helvetica, sans-serif;">
+			<!-- QR Code (left) -->
+			<div style="width: 22mm; height: 22mm; flex-shrink: 0;">
+				{@html data.qrSvg}
 			</div>
 
-			<div style="font-size: 6pt; color: #555; margin-bottom: 1mm;">
-				{data.component.componentType}
-				{#if data.component.brand}&middot; {data.component.brand}{/if}
-			</div>
-
-			{#if data.component.partNumber}
-				<div style="font-size: 5pt; color: #777; margin-bottom: 1mm;">
-					P/N: {data.component.partNumber}
+			<!-- Text + Barcode (right) -->
+			<div style="flex: 1; min-width: 0; overflow: hidden;">
+				<div style="font-size: 9pt; font-weight: bold; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+					{data.component.title}
 				</div>
-			{/if}
-
-			{#if data.component.serialNumber}
-				<div style="font-size: 5pt; color: #777; margin-bottom: 1mm;">
-					S/N: {data.component.serialNumber}
+				<div style="font-size: 7pt; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+					{data.component.componentType}
+					{#if data.component.brand}&middot; {data.component.brand}{/if}
 				</div>
-			{/if}
-
-			<div style="display: flex; justify-content: center; margin-bottom: 1mm;">
-				<div style="width: 18mm; height: 18mm;">
-					{@html data.qrSvg}
+				{#if data.component.partNumber}
+					<div style="font-size: 6pt; color: #777; margin-top: 0.5mm;">P/N: {data.component.partNumber}</div>
+				{/if}
+				{#if data.component.serialNumber}
+					<div style="font-size: 6pt; color: #777;">S/N: {data.component.serialNumber}</div>
+				{/if}
+				<div style="margin-top: 1mm;">
+					<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 8mm; width: auto; max-width: 100%;" />
 				</div>
 			</div>
-
-			<div style="display: flex; justify-content: center; margin-bottom: 0.5mm;">
-				<img src={data.barcodeDataUrl} alt={data.shortId} style="width: 25mm; height: auto;" />
-			</div>
 		</div>
 	</div>
 {/each}
diff --git a/src/routes/(app)/devices/[id]/print/+page.svelte b/src/routes/(app)/devices/[id]/print/+page.svelte
index 043dac0..cc1440e 100644
--- a/src/routes/(app)/devices/[id]/print/+page.svelte
+++ b/src/routes/(app)/devices/[id]/print/+page.svelte
@@ -22,7 +22,7 @@
 	<title>Print Label - {data.device.title}</title>
 	<style>
 		@page {
-			size: 29mm auto;
+			size: 90.3mm 29mm;
 			margin: 1mm;
 		}
 		@media print {
@@ -39,7 +39,8 @@
 		@media screen {
 			.label-preview {
 				border: 1px dashed #ccc;
-				width: 29mm;
+				width: 90.3mm;
+				height: 29mm;
 				background: white;
 			}
 		}
@@ -64,7 +65,7 @@
 	</div>
 
 	<div class="mb-2 rounded-md bg-gray-100 p-3 text-xs text-gray-600 dark:bg-gray-800 dark:text-gray-400">
-		<strong>Printer setup:</strong> Select your Brother printer, paper size "DK-22210 (29mm)" or "29mm" roll. Set margins to minimum.
+		<strong>Printer setup:</strong> Select your Brother printer, paper size "DK-1201" (29mm x 90.3mm). Set margins to minimum.
 	</div>
 
 	<p class="mb-4 text-sm text-gray-500 dark:text-gray-400">Preview ({copies} label{copies > 1 ? 's' : ''}):</p>
@@ -73,36 +74,30 @@
 <!-- Labels -->
 {#each Array(copies) as _, i}
 	<div class="print-container label-preview mx-auto mb-2 p-1">
-		<div class="text-center" style="font-family: Arial, Helvetica, sans-serif;">
-			<!-- Title -->
-			<div style="font-size: 8pt; font-weight: bold; line-height: 1.2; margin-bottom: 1mm;">
-				{data.device.title}
+		<div style="display: flex; align-items: center; gap: 2mm; height: 100%; font-family: Arial, Helvetica, sans-serif;">
+			<!-- QR Code (left) -->
+			<div style="width: 22mm; height: 22mm; flex-shrink: 0;">
+				{@html data.qrSvg}
 			</div>
 
-			<!-- Brand / Model -->
-			{#if data.device.brand || data.device.model}
-				<div style="font-size: 6pt; color: #555; margin-bottom: 1mm;">
-					{[data.device.brand, data.device.model].filter(Boolean).join(' ')}
+			<!-- Text + Barcode (right) -->
+			<div style="flex: 1; min-width: 0; overflow: hidden;">
+				<div style="font-size: 9pt; font-weight: bold; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
+					{data.device.title}
 				</div>
-			{/if}
-
-			<!-- Serial -->
-			{#if data.device.serialNumber}
-				<div style="font-size: 5pt; color: #777; margin-bottom: 1mm;">
-					S/N: {data.device.serialNumber}
+				{#if data.device.brand || data.device.model}
+					<div style="font-size: 7pt; color: #555; 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: #777; margin-top: 0.5mm;">
+						S/N: {data.device.serialNumber}
+					</div>
+				{/if}
+				<div style="margin-top: 1mm;">
+					<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 8mm; width: auto; max-width: 100%;" />
 				</div>
-			{/if}
-
-			<!-- QR Code -->
-			<div style="display: flex; justify-content: center; margin-bottom: 1mm;">
-				<div style="width: 18mm; height: 18mm;">
-					{@html data.qrSvg}
-				</div>
-			</div>
-
-			<!-- Barcode -->
-			<div style="display: flex; justify-content: center; margin-bottom: 0.5mm;">
-				<img src={data.barcodeDataUrl} alt={data.shortId} style="width: 25mm; height: auto;" />
 			</div>
 		</div>
 	</div>