Fix 2-page label: reset @page margin to 0, shrink barcode to fit
Deploy to LXC / deploy (push) Successful in 19s

The custom @page margins conflicted with browser minimum margins,
causing overflow. Now @page margin is 0, barcode height 8mm→6mm,
scale 3→2, text size 12→10 so content fits within 29mm even with
browser minimum margins selected.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
2026-04-13 09:52:01 +07:00
parent bb125396f2
commit 2f1675af1d
4 changed files with 11 additions and 11 deletions
+2 -2
View File
@@ -5,10 +5,10 @@ export async function generateBarcodeSvg(text: string): Promise<string> {
const buf = await bwipjs.toBuffer({ const buf = await bwipjs.toBuffer({
bcid: 'code128', bcid: 'code128',
text, text,
scale: 3, scale: 2,
height: 8, height: 8,
includetext: true, includetext: true,
textsize: 12, textsize: 10,
textxalign: 'center' textxalign: 'center'
}); });
+3 -3
View File
@@ -26,7 +26,7 @@
</button> </button>
</div> </div>
<div style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #666; margin-bottom: 16px;"> <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 62mm" (DK-11209), margins: top 0, bottom 0, left 2mm, right 0.5mm. <strong>Setup:</strong> Brother QL-820NWB, paper "29mm x 62mm" (DK-11209), margins: minimum.
</div> </div>
</div> </div>
@@ -50,7 +50,7 @@
</div> </div>
{/if} {/if}
<div style="margin-top: 0.5mm;"> <div style="margin-top: 0.5mm;">
<img src={label.barcodeDataUrl} alt={label.shortId} style="height: 8mm; width: auto; max-width: 58mm;" /> <img src={label.barcodeDataUrl} alt={label.shortId} style="height: 6mm; width: auto; max-width: 56mm;" />
</div> </div>
</div> </div>
</div> </div>
@@ -59,7 +59,7 @@
<style> <style>
@page { @page {
size: 62mm 29mm; size: 62mm 29mm;
margin: 0mm 0.5mm 0mm 2mm; margin: 0;
} }
@media print { @media print {
.no-print { display: none !important; } .no-print { display: none !important; }
@@ -34,7 +34,7 @@
</div> </div>
</div> </div>
<div style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #666; margin-bottom: 16px;"> <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 62mm" (DK-11209), margins: top 0, bottom 0, left 2mm, right 0.5mm. <strong>Setup:</strong> Brother QL-820NWB, paper "29mm x 62mm" (DK-11209), margins: minimum.
</div> </div>
</div> </div>
@@ -52,7 +52,7 @@
<div style="font-size: 5pt; color: #666;">P/N: {data.component.partNumber}</div> <div style="font-size: 5pt; color: #666;">P/N: {data.component.partNumber}</div>
{/if} {/if}
<div style="margin-top: 0.5mm;"> <div style="margin-top: 0.5mm;">
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 8mm; width: auto; max-width: 58mm;" /> <img src={data.barcodeDataUrl} alt={data.shortId} style="height: 6mm; width: auto; max-width: 56mm;" />
</div> </div>
</div> </div>
</div> </div>
@@ -61,7 +61,7 @@
<style> <style>
@page { @page {
size: 62mm 29mm; size: 62mm 29mm;
margin: 0mm 0.5mm 0mm 2mm; margin: 0;
} }
@media print { @media print {
.no-print { display: none !important; } .no-print { display: none !important; }
@@ -34,7 +34,7 @@
</div> </div>
</div> </div>
<div style="background: #f3f4f6; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #666; margin-bottom: 16px;"> <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 62mm" (DK-11209), margins: top 0, bottom 0, left 2mm, right 0.5mm. <strong>Setup:</strong> Brother QL-820NWB, paper "29mm x 62mm" (DK-11209), margins: minimum.
</div> </div>
</div> </div>
@@ -58,7 +58,7 @@
</div> </div>
{/if} {/if}
<div style="margin-top: 0.5mm;"> <div style="margin-top: 0.5mm;">
<img src={data.barcodeDataUrl} alt={data.shortId} style="height: 8mm; width: auto; max-width: 58mm;" /> <img src={data.barcodeDataUrl} alt={data.shortId} style="height: 6mm; width: auto; max-width: 56mm;" />
</div> </div>
</div> </div>
</div> </div>
@@ -67,7 +67,7 @@
<style> <style>
@page { @page {
size: 62mm 29mm; size: 62mm 29mm;
margin: 0mm 0.5mm 0mm 2mm; margin: 0;
} }
@media print { @media print {
.no-print { display: none !important; } .no-print { display: none !important; }