From 282d8e75c5d6a218bd8620955eeafb883e30a3b9 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Thu, 2 Jul 2026 19:58:05 +0200
Subject: [PATCH] fix(ui): make the zoom QR actually fill the screen
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

lnbits-qrcode has no `options` prop — it renders width:100% of its
parent, capped by a `max-width` PROP that defaults to 450px. So the
previous `:options="{width: qrZoom.size}"` was dead: the QR only ever
grew to its container, and inside the zoom dialog's items-center flex
column the container collapsed to the QR's natural width, so "enlarge"
barely changed anything.

Wrap the zoom QR in an explicit full-width div (capped 96vw), feed the
real `max-width` prop, hide the component's own copy/download buttons
for a clean scan target, and size it to ~full shorter-viewport-edge.
Also swap the inline pair-dialog QR's dead `:options` for `max-width`.
---
 static/js/index.js               |  8 +++++---
 templates/spirekeeper/index.html | 16 +++++++++++-----
 2 files changed, 16 insertions(+), 8 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index 892cd17..6c722b3 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -1610,12 +1610,14 @@ window.app = Vue.createApp({
       })
     },
 
-    // Open a fullscreen QR sized to the shorter viewport edge (minus a
-    // margin) so it renders as large as possible for a spire's camera.
+    // Open a fullscreen QR sized to nearly the full shorter viewport edge
+    // so it renders as large as possible for a spire's camera. The QR's
+    // wrapper caps at 96vw, so an over-estimate here is fine — it just
+    // means "fill the width". Feeds the lnbits-qrcode `max-width` prop.
     openQrZoom(value) {
       if (!value) return
       const edge = Math.min(window.innerWidth, window.innerHeight)
-      this.qrZoom.size = Math.max(240, Math.floor(edge - 64))
+      this.qrZoom.size = Math.max(240, Math.floor(edge - 16))
       this.qrZoom.value = value
       this.qrZoom.show = true
     },
diff --git a/templates/spirekeeper/index.html b/templates/spirekeeper/index.html
index be55a93..fd26d1c 100644
--- a/templates/spirekeeper/index.html
+++ b/templates/spirekeeper/index.html
@@ -902,11 +902,11 @@
           </q-banner>
 
           <div class="column items-center q-mb-md">
-            <div class="cursor-pointer"
+            <div class="cursor-pointer" :style="{width: '280px', maxWidth: '90vw'}"
                  @click="openQrZoom(pairDialog.result.seed_url)">
               <lnbits-qrcode
                 :value="pairDialog.result.seed_url"
-                :options="{width: 280}"></lnbits-qrcode>
+                :max-width="280"></lnbits-qrcode>
             </div>
             <q-btn flat dense color="primary" icon="zoom_out_map"
                    label="Enlarge for scanning" size="sm" class="q-mt-sm"
@@ -957,9 +957,15 @@
         </q-bar>
         <q-card-section
           class="col column items-center justify-center q-pt-none">
-          <lnbits-qrcode
-            :value="qrZoom.value"
-            :options="{width: qrZoom.size}"></lnbits-qrcode>
+          <!-- lnbits-qrcode renders width:100% of its parent capped by the
+               max-width prop (NOT an `options` prop). Give it an explicit
+               full-width wrapper so it actually fills the screen. -->
+          <div :style="{width: qrZoom.size + 'px', maxWidth: '96vw'}">
+            <lnbits-qrcode
+              :value="qrZoom.value"
+              :max-width="qrZoom.size"
+              :show-buttons="false"></lnbits-qrcode>
+          </div>
           <div class="text-caption text-center q-mt-md" :style="{opacity: 0.7}">
             Point the spire's camera here — tap Close when scanned.
           </div>