deploy: force single-page barcode printing

packages/fieldlens-core/src/features/codes/CodeLab.css

@@ -179,32 +179,52 @@
 
 @media print {
   @page {
-    margin: 12mm;
+    size: auto;
+    margin: 8mm;
   }
 
-  body * {
+  html,
-    visibility: hidden !important;
+  body {
+    width: 100%;
+    min-height: 0 !important;
+    margin: 0 !important;
+    padding: 0 !important;
+    background: #fff !important;
   }
 
-  .barcode-print-sheet,
+  #root {
-  .barcode-print-sheet * {
+    display: none !important;
-    visibility: visible !important;
   }
 
   .barcode-print-sheet {
-    position: fixed;
+    position: static;
-    inset: 0;
     display: grid !important;
+    width: 100%;
+    height: auto;
+    min-height: 0;
     place-items: center;
+    margin: 0;
     padding: 0;
+    overflow: visible;
+    break-after: avoid-page;
+    break-before: avoid-page;
+    break-inside: avoid-page;
+    page-break-after: avoid;
+    page-break-before: avoid;
+    page-break-inside: avoid;
     background: #fff;
   }
 
   .barcode-print-label {
     display: grid;
     width: min(170mm, 100%);
+    max-height: calc(100vh - 16mm);
     place-items: center;
-    gap: 8mm;
+    gap: 6mm;
+    margin: 0;
+    padding: 0;
+    break-inside: avoid-page;
+    page-break-inside: avoid;
     color: #000;
     background: #fff;
     text-align: center;
@@ -217,6 +237,8 @@
   .barcode-print-label canvas {
     display: block;
     max-width: 100%;
+    max-height: 65vh;
+    width: auto;
     height: auto;
   }
 

packages/fieldlens-core/src/features/codes/CodeLab.tsx

@@ -1,6 +1,7 @@
 import bwipjs from 'bwip-js'
 import { Printer, RefreshCw } from 'lucide-react'
 import { useEffect, useRef, useState } from 'react'
+import { createPortal } from 'react-dom'
 
 import { appendGtinCheckDigit, randomDigits } from '../../lib/barcodes'
 import './CodeLab.css'
@@ -215,7 +216,7 @@ export function CodeLab() {
       ) : (
         <div className="ean-lab-grid">{eanFixtures.map((fixture) => <EanLabelCard fixture={fixture} key={fixture.id} />)}</div>
       )}
-      {printFixture && <PrintableBarcode fixture={printFixture} />}
+      {printFixture && createPortal(<PrintableBarcode fixture={printFixture} />, document.body)}
     </section>
   )
 }