Move print labels to (print) layout group to fix blank output

The (app) layout's flex h-screen + overflow-hidden container was
clipping label content in the print renderer. Print routes now use
a dedicated (print) layout group with no sidebar/header/flex shell,
just the raw label HTML. Routes changed to /print/device/[id] and
/print/component/[id].

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

.claude/settings.local.json

@@ -0,0 +1,26 @@
+{
+  "permissions": {
+    "allow": [
+      "Read(//c/Users/berwn/.claude/**)",
+      "Read(//c/Users/berwn/**)",
+      "Read(//c/dev/b4l_r4l/**)",
+      "mcp__nocodb__getBaseInfo",
+      "mcp__nocodb__getTablesList",
+      "mcp__nocodb__getTableSchema",
+      "Bash(xargs -I {} head -30 {})",
+      "Bash(xargs head:*)",
+      "Bash(npm install:*)",
+      "Bash(npx svelte-check:*)",
+      "Bash(npx drizzle-kit:*)",
+      "Bash(npx svelte-kit:*)",
+      "Bash(git init:*)",
+      "Bash(git status:*)",
+      "Bash(git add:*)",
+      "Bash(git commit:*)",
+      "Bash(git:*)",
+      "mcp__nixos__nix",
+      "Bash(npm run:*)",
+      "Bash(ls /c/dev/b4l_r4l/node_modules/bwip-js/dist/*.d.ts)"
+    ]
+  }
+}

src/routes/(app)/components/[id]/+page.svelte

@@ -37,7 +37,7 @@
 				class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
 				Label
 			</a>
-			<button onclick={() => window.open(`/components/${c.id}/print`, '_blank', 'width=400,height=600')}
+			<button onclick={() => window.open(`/print/component/${c.id}`, '_blank', 'width=600,height=400')}
 				class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
 				Print
 			</button>

src/routes/(app)/components/[id]/print/+page.svelte

@@ -1,102 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-
-	let { data } = $props();
-
-	let copies = $state(1);
-
-	function printNow() {
-		window.print();
-	}
-
-	onMount(() => {
-		if (window.opener) {
-			setTimeout(() => window.print(), 300);
-		}
-	});
-</script>
-
-<svelte:head>
-	<title>Print Label - {data.component.title}</title>
-</svelte:head>
-
-<div class="no-print mx-auto max-w-lg">
-	<div class="mb-4 flex items-center justify-between">
-		<a href="/components/{data.component.id}" class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">&larr; Back</a>
-		<div class="flex items-center gap-3">
-			<label class="text-sm text-gray-600 dark:text-gray-400">
-				Copies:
-				<input type="number" bind:value={copies} min="1" max="20"
-					class="ml-1 w-14 rounded border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
-			</label>
-			<button onclick={printNow}
-				class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
-				Print
-			</button>
-		</div>
-	</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-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>
-</div>
-
-{#each Array(copies) as _, i}
-	<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;">
-			<div style="width: 22mm; height: 22mm; flex-shrink: 0;">
-				{@html data.qrSvg}
-			</div>
-			<div style="flex: 1; min-width: 0; overflow: hidden;">
-				<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;">
-					{data.component.componentType}
-					{#if data.component.brand}&middot; {data.component.brand}{/if}
-				</div>
-				{#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>
-	</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>

src/routes/(app)/devices/[id]/+page.svelte

@@ -62,7 +62,7 @@
 				class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
 				Label
 			</a>
-			<button onclick={() => window.open(`/devices/${data.device.id}/print`, '_blank', 'width=400,height=600')}
+			<button onclick={() => window.open(`/print/device/${data.device.id}`, '_blank', 'width=600,height=400')}
 				class="rounded-md border border-gray-300 px-3 py-1.5 text-sm text-gray-600 hover:bg-gray-100 dark:border-gray-600 dark:text-gray-400 dark:hover:bg-gray-700">
 				Print
 			</button>

src/routes/(app)/devices/[id]/print/+page.svelte

@@ -1,104 +0,0 @@
-<script lang="ts">
-	import { onMount } from 'svelte';
-
-	let { data } = $props();
-
-	let copies = $state(1);
-
-	function printNow() {
-		window.print();
-	}
-
-	onMount(() => {
-		if (window.opener) {
-			setTimeout(() => window.print(), 300);
-		}
-	});
-</script>
-
-<svelte:head>
-	<title>Print Label - {data.device.title}</title>
-</svelte:head>
-
-<!-- Screen controls -->
-<div class="no-print mx-auto max-w-lg">
-	<div class="mb-4 flex items-center justify-between">
-		<a href="/devices/{data.device.id}" class="text-sm text-blue-600 hover:text-blue-700 dark:text-blue-400">&larr; Back</a>
-		<div class="flex items-center gap-3">
-			<label class="text-sm text-gray-600 dark:text-gray-400">
-				Copies:
-				<input type="number" bind:value={copies} min="1" max="20"
-					class="ml-1 w-14 rounded border border-gray-300 px-2 py-1 text-sm dark:border-gray-600 dark:bg-gray-700 dark:text-white" />
-			</label>
-			<button onclick={printNow}
-				class="rounded-md bg-blue-600 px-4 py-2 text-sm font-medium text-white hover:bg-blue-700">
-				Print
-			</button>
-		</div>
-	</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-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>
-</div>
-
-<!-- Labels -->
-{#each Array(copies) as _, i}
-	<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;">
-			<div style="width: 22mm; height: 22mm; flex-shrink: 0;">
-				{@html data.qrSvg}
-			</div>
-			<div style="flex: 1; min-width: 0; overflow: hidden;">
-				<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}
-					<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>
-			</div>
-		</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>

src/routes/(print)/+layout.server.ts

@@ -0,0 +1,8 @@
+import type { LayoutServerLoad } from './$types';
+import { redirect } from '@sveltejs/kit';
+
+export const load: LayoutServerLoad = async ({ locals }) => {
+	if (!locals.user) {
+		redirect(302, '/login');
+	}
+};

src/routes/(print)/+layout.svelte

@@ -0,0 +1,6 @@
+<script lang="ts">
+	import '../../app.css';
+	let { children } = $props();
+</script>
+
+{@render children()}

src/routes/(print)/print/component/[id]/+page.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let { data } = $props();
+	let copies = $state(1);
+
+	onMount(() => {
+		if (window.opener) {
+			setTimeout(() => window.print(), 500);
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>Print - {data.component.title}</title>
+</svelte:head>
+
+<div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;">
+	<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+		<a href="/components/{data.component.id}" style="color: #2563eb; font-size: 14px;">&#8592; Back</a>
+		<div style="display: flex; align-items: center; gap: 12px;">
+			<label style="font-size: 14px; color: #666;">
+				Copies:
+				<input type="number" bind:value={copies} min="1" max="20"
+					style="width: 50px; margin-left: 4px; padding: 4px; border: 1px solid #ccc; border-radius: 4px;" />
+			</label>
+			<button onclick={() => window.print()}
+				style="background: #2563eb; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer;">
+				Print
+			</button>
+		</div>
+	</div>
+	<div style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #666; margin-bottom: 16px;">
+		<strong>Setup:</strong> Brother QL-820NWB, paper "29mm x 90mm" (DK-1201), margins minimum.
+	</div>
+</div>
+
+{#each Array(copies) as _}
+	<div class="label" style="width: 90.3mm; 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; gap: 3mm; height: 100%; font-family: Arial, Helvetica, sans-serif;">
+			<div style="width: 23mm; height: 23mm; flex-shrink: 0;">
+				{@html data.qrSvg}
+			</div>
+			<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}
+				{#if data.component.serialNumber}
+					<div style="font-size: 6pt; color: #666;">S/N: {data.component.serialNumber}</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>
+		</div>
+	</div>
+{/each}
+
+<style>
+	@page {
+		size: 90.3mm 29mm;
+		margin: 0;
+	}
+	@media print {
+		.no-print { display: none !important; }
+		.label {
+			border: none !important;
+			margin: 0 !important;
+			page-break-after: always;
+		}
+	}
+</style>

src/routes/(print)/print/device/[id]/+page.svelte

@@ -0,0 +1,80 @@
+<script lang="ts">
+	import { onMount } from 'svelte';
+
+	let { data } = $props();
+	let copies = $state(1);
+
+	onMount(() => {
+		if (window.opener) {
+			setTimeout(() => window.print(), 500);
+		}
+	});
+</script>
+
+<svelte:head>
+	<title>Print - {data.device.title}</title>
+</svelte:head>
+
+<div class="no-print" style="max-width: 500px; margin: 20px auto; font-family: system-ui, sans-serif;">
+	<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
+		<a href="/devices/{data.device.id}" style="color: #2563eb; font-size: 14px;">&#8592; Back</a>
+		<div style="display: flex; align-items: center; gap: 12px;">
+			<label style="font-size: 14px; color: #666;">
+				Copies:
+				<input type="number" bind:value={copies} min="1" max="20"
+					style="width: 50px; margin-left: 4px; padding: 4px; border: 1px solid #ccc; border-radius: 4px;" />
+			</label>
+			<button onclick={() => window.print()}
+				style="background: #2563eb; color: white; border: none; padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer;">
+				Print
+			</button>
+		</div>
+	</div>
+	<div style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #666; margin-bottom: 16px;">
+		<strong>Setup:</strong> Brother QL-820NWB, paper "29mm x 90mm" (DK-1201), margins minimum.
+	</div>
+</div>
+
+{#each Array(copies) as _}
+	<div class="label" style="width: 90.3mm; 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; gap: 3mm; height: 100%; font-family: Arial, Helvetica, sans-serif;">
+			<div style="width: 23mm; height: 23mm; flex-shrink: 0;">
+				{@html data.qrSvg}
+			</div>
+			<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}
+				<div style="margin-top: 1mm;">
+					<img src={data.barcodeDataUrl} alt={data.shortId}
+						style="height: 7mm; width: auto; max-width: 55mm; display: block;" />
+				</div>
+			</div>
+		</div>
+	</div>
+{/each}
+
+<style>
+	@page {
+		size: 90.3mm 29mm;
+		margin: 0;
+	}
+	@media print {
+		.no-print { display: none !important; }
+		.label {
+			border: none !important;
+			margin: 0 !important;
+			page-break-after: always;
+		}
+	}
+</style>