fix: QR-Code overflowed Container — auf SVG umgestellt mit width/height 100%

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

@@ -533,20 +533,26 @@
         (Diagnostic-Container bleibt auf ENV).
       </div>
       <div class="card" style="max-width:600px;">
-        <div style="display:grid;grid-template-columns:150px 1fr;gap:8px;align-items:center;font-size:13px;">
+        <div style="display:grid;grid-template-columns:140px 1fr;gap:8px 10px;align-items:center;font-size:13px;">
           <label style="color:#8888AA;">RVS Host:</label>
-          <input type="text" id="rc-rvs-host" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
+          <input type="text" id="rc-rvs-host" style="width:100%;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
           <label style="color:#8888AA;">RVS Port:</label>
-          <input type="text" id="rc-rvs-port" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
+          <input type="text" id="rc-rvs-port" style="width:100%;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
           <label style="color:#8888AA;">RVS TLS:</label>
-          <select id="rc-rvs-tls" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
+          <select id="rc-rvs-tls" style="width:100%;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;">
             <option value="true">true (wss://)</option>
             <option value="false">false (ws://)</option>
           </select>
           <label style="color:#8888AA;">RVS Token:</label>
-          <input type="password" id="rc-rvs-token" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;font-family:monospace;">
+          <div style="display:flex;gap:4px;min-width:0;">
+            <input type="password" id="rc-rvs-token" style="flex:1;min-width:0;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;font-family:monospace;">
+            <button type="button" class="btn secondary" onclick="toggleSecret('rc-rvs-token', this)" style="padding:4px 10px;flex-shrink:0;" title="Anzeigen/Verbergen">&#128065;</button>
+          </div>
           <label style="color:#8888AA;">Aria Auth Token:</label>
-          <input type="password" id="rc-auth-token" style="background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;font-family:monospace;">
+          <div style="display:flex;gap:4px;min-width:0;">
+            <input type="password" id="rc-auth-token" style="flex:1;min-width:0;box-sizing:border-box;background:#1E1E2E;border:1px solid #2A2A3E;border-radius:4px;padding:6px;color:#fff;font-family:monospace;">
+            <button type="button" class="btn secondary" onclick="toggleSecret('rc-auth-token', this)" style="padding:4px 10px;flex-shrink:0;" title="Anzeigen/Verbergen">&#128065;</button>
+          </div>
         </div>
         <div style="display:flex;gap:8px;margin-top:12px;">
           <button class="btn" onclick="saveRuntimeConfig()" style="flex:1;">Speichern</button>
@@ -565,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;">
@@ -1498,6 +1504,21 @@
       send({ action: 'send_voice_config', defaultVoice, highlightVoice, ttsEnabled, speedRamona, speedThorsten, ttsEngine, xttsVoice, whisperModel });
     }
 
+    // ── Passwort-Feld Anzeigen/Verbergen ─────────────────────
+    function toggleSecret(inputId, btn) {
+      const el = document.getElementById(inputId);
+      if (!el) return;
+      if (el.type === 'password') {
+        el.type = 'text';
+        btn.innerHTML = '&#128064;'; // 👀
+        btn.title = 'Verbergen';
+      } else {
+        el.type = 'password';
+        btn.innerHTML = '&#128065;'; // 👁
+        btn.title = 'Anzeigen';
+      }
+    }
+
     // ── Runtime-Konfiguration ─────────────────────
     async function loadRuntimeConfig() {
       const statusEl = document.getElementById('rc-status');
@@ -1584,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>`;
       }