From b33966b26eac839af8a643a06e623bad5a33fba7 Mon Sep 17 00:00:00 2001
From: grabowski <berwn@buildfor.life>
Date: Tue, 7 Apr 2026 11:43:32 +0700
Subject: [PATCH] Fix empty label preview: use inline styles to avoid Tailwind
 reset conflicts

Moved all label styling to inline styles with explicit color: black and
background: white so dark mode and Tailwind resets can't hide content.
Print styles use :global() scoped selectors.

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

diff --git a/src/routes/(app)/components/[id]/print/+page.svelte b/src/routes/(app)/components/[id]/print/+page.svelte
index 23b9e01..595745a 100644
--- a/src/routes/(app)/components/[id]/print/+page.svelte
+++ b/src/routes/(app)/components/[id]/print/+page.svelte
@@ -18,31 +18,6 @@
 
 <svelte:head>
 	<title>Print Label - {data.component.title}</title>
-	<style>
-		@page {
-			size: 90.3mm 29mm;
-			margin: 1mm;
-		}
-		.label-preview {
-			width: 90.3mm;
-			height: 29mm;
-			background: white;
-			box-sizing: border-box;
-			overflow: hidden;
-		}
-		@media screen {
-			.label-preview {
-				border: 1px dashed #ccc;
-			}
-		}
-		@media print {
-			.no-print { display: none !important; }
-			body { margin: 0; padding: 0; background: white !important; }
-			nav, header, aside { display: none !important; }
-			main { padding: 0 !important; overflow: visible !important; }
-			.print-container { break-inside: avoid; page-break-after: always; }
-		}
-	</style>
 </svelte:head>
 
 <div class="no-print mx-auto max-w-lg">
@@ -69,16 +44,13 @@
 </div>
 
 {#each Array(copies) as _, i}
-	<div class="print-container label-preview mx-auto mb-2 p-1">
+	<div class="label" style="width: 90.3mm; height: 29mm; background: white; color: black; box-sizing: border-box; overflow: hidden; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc;">
 		<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>
-
-			<!-- 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;">
+				<div style="font-size: 9pt; font-weight: bold; line-height: 1.2; color: black; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
 					{data.component.title}
 				</div>
 				<div style="font-size: 7pt; color: #555; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
@@ -98,3 +70,33 @@
 		</div>
 	</div>
 {/each}
+
+<style>
+	@page {
+		size: 90.3mm 29mm;
+		margin: 1mm;
+	}
+	@media print {
+		:global(.no-print),
+		:global(nav),
+		:global(header),
+		:global(aside) {
+			display: none !important;
+		}
+		:global(main) {
+			padding: 0 !important;
+			overflow: visible !important;
+		}
+		:global(body) {
+			margin: 0;
+			padding: 0;
+			background: white !important;
+		}
+		.label {
+			border: none !important;
+			margin: 0 !important;
+			break-inside: avoid;
+			page-break-after: always;
+		}
+	}
+</style>
diff --git a/src/routes/(app)/devices/[id]/print/+page.svelte b/src/routes/(app)/devices/[id]/print/+page.svelte
index 108f4ca..1973de2 100644
--- a/src/routes/(app)/devices/[id]/print/+page.svelte
+++ b/src/routes/(app)/devices/[id]/print/+page.svelte
@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { browser } from '$app/environment';
 	import { onMount } from 'svelte';
 
 	let { data } = $props();
@@ -11,7 +10,6 @@
 	}
 
 	onMount(() => {
-		// Auto-print if opened as popup
 		if (window.opener) {
 			setTimeout(() => window.print(), 300);
 		}
@@ -20,31 +18,6 @@
 
 <svelte:head>
 	<title>Print Label - {data.device.title}</title>
-	<style>
-		@page {
-			size: 90.3mm 29mm;
-			margin: 1mm;
-		}
-		.label-preview {
-			width: 90.3mm;
-			height: 29mm;
-			background: white;
-			box-sizing: border-box;
-			overflow: hidden;
-		}
-		@media screen {
-			.label-preview {
-				border: 1px dashed #ccc;
-			}
-		}
-		@media print {
-			.no-print { display: none !important; }
-			body { margin: 0; padding: 0; background: white !important; }
-			nav, header, aside { display: none !important; }
-			main { padding: 0 !important; overflow: visible !important; }
-			.print-container { break-inside: avoid; page-break-after: always; }
-		}
-	</style>
 </svelte:head>
 
 <!-- Screen controls -->
@@ -73,16 +46,13 @@
 
 <!-- Labels -->
 {#each Array(copies) as _, i}
-	<div class="print-container label-preview mx-auto mb-2 p-1">
+	<div class="label" style="width: 90.3mm; height: 29mm; background: white; color: black; box-sizing: border-box; overflow: hidden; padding: 1mm; margin: 0 auto 8px auto; border: 1px dashed #ccc;">
 		<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>
-
-			<!-- 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;">
+				<div style="font-size: 9pt; font-weight: bold; line-height: 1.2; color: black; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
 					{data.device.title}
 				</div>
 				{#if data.device.brand || data.device.model}
@@ -102,3 +72,33 @@
 		</div>
 	</div>
 {/each}
+
+<style>
+	@page {
+		size: 90.3mm 29mm;
+		margin: 1mm;
+	}
+	@media print {
+		:global(.no-print),
+		:global(nav),
+		:global(header),
+		:global(aside) {
+			display: none !important;
+		}
+		:global(main) {
+			padding: 0 !important;
+			overflow: visible !important;
+		}
+		:global(body) {
+			margin: 0;
+			padding: 0;
+			background: white !important;
+		}
+		.label {
+			border: none !important;
+			margin: 0 !important;
+			break-inside: avoid;
+			page-break-after: always;
+		}
+	}
+</style>