Grotti 2.5.1: Druckbericht, Statistik, Spulenakte und Protokoll-Fixes.

web/templates/etikett.html

@@ -41,14 +41,17 @@
     border: 1px solid #ccc;
     border-radius: 4px;
     display: grid;
-    grid-template-columns: 1fr 22mm;
-    gap: 3mm;
+    grid-template-columns: 1fr 20mm;
+    gap: 2.5mm;
     align-items: center;
+    overflow: hidden;
   }
+  .meta { min-width: 0; }
   .meta h1 {
     margin: 0 0 2mm;
     font-size: 4.2mm;
     letter-spacing: -0.02em;
+    overflow-wrap: anywhere;
   }
   .meta p { margin: 0 0 1.2mm; font-size: 3.1mm; color: #333; }
   .meta .code { font-weight: 700; font-variant-numeric: tabular-nums; }
@@ -61,7 +64,19 @@
     margin-left: -1mm;
   }
   .dot:first-child { margin-left: 0; }
-  #qr { width: 20mm; height: 20mm; }
+  .qr-wrap {
+    width: 20mm;
+    height: 20mm;
+    overflow: hidden;
+    flex-shrink: 0;
+  }
+  .qr-wrap canvas {
+    display: block;
+    width: 20mm !important;
+    height: 20mm !important;
+    max-width: 100%;
+    max-height: 100%;
+  }
   @media print {
     body { background: #fff; }
     .toolbar { display: none; }
@@ -99,14 +114,20 @@
     <p>Hersteller: {{ spool.hersteller_charge }}</p>
     {% endif %}
   </div>
-  <canvas id="qr" width="120" height="120"></canvas>
+  <div class="qr-wrap">
+    <canvas id="qr" width="80" height="80"></canvas>
+  </div>
 </div>
 <script src="{{ url_for('static', filename='qrcode.min.js') }}?v=1"></script>
 <script>
 QRCode.toCanvas(document.getElementById("qr"), {{ qr_url|tojson }}, {
-  width: 120,
+  width: 80,
   margin: 1,
   color: { dark: "#111111", light: "#ffffff" }
+}, () => {
+  const node = document.getElementById("qr");
+  node.style.width = "20mm";
+  node.style.height = "20mm";
 });
 </script>
 </body>