B4L/buildfor_life_repair
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix empty label preview: use inline styles to avoid Tailwind reset conflicts

Browse Source 
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>
This commit is contained in:
Alexander Grabowski
2026-04-07 11:43:32 +07:00
parent 3fedc70503
commit b33966b26e
2 changed files with 64 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/routes/(app)/devices/[id]/print/+page.svelte
+32 -32
View File
@@ -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>