fix: use div container for QRCode.js, show element before rendering

public/app.js

@@ -227,8 +227,11 @@ async function fetchAndRenderQR() {
       const qrData = json.qrData;
       if (!qrData) continue;
 
-      // Wipe any previous canvas children
-      while (qrCanvas.firstChild) qrCanvas.removeChild(qrCanvas.firstChild);
+      // Show the container FIRST so the div has real dimensions when QRCode renders
+      setQrState('ready');
+
+      // Wipe any previous render
+      qrCanvas.innerHTML = '';
 
       new QRCode(qrCanvas, {
         text:         qrData,
@@ -239,7 +242,6 @@ async function fetchAndRenderQR() {
         correctLevel: QRCode.CorrectLevel.M,
       });
       qrRendered = true;
-      setQrState('ready');
       return;
     } catch (err) {
       console.warn('fetchAndRenderQR attempt', i, err);

public/index.html

@@ -93,7 +93,7 @@
           <!-- QR code rendered on canvas via qrcode.js -->
           <div id="qr-ready" class="qr-state hidden">
             <div class="qr-frame">
-              <canvas id="qr-canvas"></canvas>
+              <div id="qr-canvas"></div>
             </div>
             <p class="qr-hint">Point your Shellular app camera at the code above</p>
           </div>