From 593d26e0ffdfb37af9d393a646d17a9aa1e11f5c Mon Sep 17 00:00:00 2001
From: duffyduck <info@hacker-net.de>
Date: Sun, 19 Apr 2026 16:28:41 +0200
Subject: [PATCH] =?UTF-8?q?fix:=20QR-Code=20overflowed=20Container=20?=
 =?UTF-8?q?=E2=80=94=20auf=20SVG=20umgestellt=20mit=20width/height=20100%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Der QR wurde mit createImgTag() als fester Pixel-IMG gerendert und
ueberlappte den Warnhinweis + Button rechts daneben. Fix:

- createSvgTag mit cellSize=4 + scalable=true
- SVG skaliert auf width:100%/height:100% der 220x220 Box
- Container: flex-shrink:0 (damit Flex ihn nicht weiter schrumpft)
- overflow:hidden als Sicherheit

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 diagnostic/index.html | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/diagnostic/index.html b/diagnostic/index.html
index 538c519..9affa49 100644
--- a/diagnostic/index.html
+++ b/diagnostic/index.html
@@ -571,7 +571,7 @@
       </div>
       <div class="card" style="max-width:500px;">
         <div style="display:flex;gap:12px;align-items:flex-start;">
-          <div id="onboarding-qr" style="width:220px;height:220px;background:#1E1E2E;border-radius:6px;display:flex;align-items:center;justify-content:center;color:#555570;font-size:11px;text-align:center;padding:8px;">
+          <div id="onboarding-qr" style="width:220px;height:220px;flex-shrink:0;background:#1E1E2E;border-radius:6px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#555570;font-size:11px;text-align:center;">
             QR-Code wird geladen...
           </div>
           <div style="flex:1;font-size:11px;color:#8888AA;line-height:1.5;">
@@ -1605,8 +1605,12 @@
         const qr = window.qrcode(0, 'M');
         qr.addData(payload);
         qr.make();
-        box.innerHTML = qr.createImgTag(6, 4);
-        box.querySelector('img').style.cssText = 'background:#fff;padding:8px;border-radius:4px;display:block;';
+        // Als SVG rendern — skaliert sauber auf Container-Groesse
+        box.innerHTML = qr.createSvgTag({ cellSize: 4, margin: 2, scalable: true });
+        const svg = box.querySelector('svg');
+        if (svg) {
+          svg.style.cssText = 'width:100%;height:100%;background:#fff;border-radius:4px;padding:6px;box-sizing:border-box;display:block;';
+        }
       } catch (e) {
         box.innerHTML = `<div style="color:#FF6B6B;">Fehler: ${e.message}</div>`;
       }