From 015208500a49e42e1549febc5b9fc52e08915cfb Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Thu, 2 Jul 2026 19:36:07 +0200
Subject: [PATCH] fix(ui): make spirekeeper dialogs mobile-friendly + add
 fullscreen QR zoom
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The `min-width: 480px` on dialog cards overrode `max-width: 95vw` on
narrow viewports (CSS min-width wins on conflict), so add-machine / pair
/ etc. dialogs overflowed off-screen on phones. Switch every dialog card
from minWidth to width so maxWidth can shrink it to fit.

Also cap the tall add-machine form section at 65vh with a scroll
container so all fields stay reachable on short screens.

For pairing, the seed-URL QR is now tappable and has an "Enlarge for
scanning" button opening a fullscreen maximized QR sized to the shorter
viewport edge — maximises visibility to the spire's scan camera.
---
 static/js/index.js               | 17 +++++++++
 templates/spirekeeper/index.html | 61 +++++++++++++++++++++++---------
 2 files changed, 62 insertions(+), 16 deletions(-)

diff --git a/static/js/index.js b/static/js/index.js
index 09188ac..892cd17 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -200,6 +200,13 @@ window.app = Vue.createApp({
         durationHours: null,
         result: null
       },
+      // Fullscreen QR overlay — maximises a QR's on-screen size so a spire
+      // camera can lock onto it. openQrZoom() sizes it to the viewport.
+      qrZoom: {
+        show: false,
+        value: '',
+        size: 280
+      },
       machineDetail: {
         show: false,
         loading: false,
@@ -1603,6 +1610,16 @@ 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.
+    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.value = value
+      this.qrZoom.show = true
+    },
+
     _emptyDepositForm() {
       // currency is server-resolved from the selected client's machine
       // fiat_code (see #26); not stored on the form, just displayed in
diff --git a/templates/spirekeeper/index.html b/templates/spirekeeper/index.html
index 322f4f2..be55a93 100644
--- a/templates/spirekeeper/index.html
+++ b/templates/spirekeeper/index.html
@@ -763,13 +763,13 @@
     <!-- ADD MACHINE DIALOG                                              -->
     <!-- =============================================================== -->
     <q-dialog v-model="addMachineDialog.show" persistent>
-      <q-card :style="{minWidth: '480px', maxWidth: '95vw'}">
+      <q-card :style="{width: '480px', maxWidth: '95vw'}">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-h6">Add bitSpire machine</div>
           <q-space ></q-space>
           <q-btn icon="close" flat round dense v-close-popup></q-btn>
         </q-card-section>
-        <q-card-section>
+        <q-card-section class="scroll" :style="{maxHeight: '65vh'}">
           <p class="text-caption q-mb-md" :style="{opacity: 0.7}">
             Register an ATM by its Nostr public key. Choose the LNbits wallet that
             will receive cash-out payments from this machine — settlements there
@@ -847,7 +847,7 @@
     <!-- PAIR SPIRE DIALOG — mint bunker key + one-shot seed URL (S0/#9) -->
     <!-- =============================================================== -->
     <q-dialog v-model="pairDialog.show" persistent>
-      <q-card :style="{minWidth: '480px', maxWidth: '95vw'}">
+      <q-card :style="{width: '480px', maxWidth: '95vw'}">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-h6">Pair spire</div>
           <q-space></q-space>
@@ -901,10 +901,16 @@
             into <code>provision-atm</code>. Shown once — copy it now.
           </q-banner>
 
-          <div class="row justify-center q-mb-md">
-            <lnbits-qrcode
-              :value="pairDialog.result.seed_url"
-              :options="{width: 280}"></lnbits-qrcode>
+          <div class="column items-center q-mb-md">
+            <div class="cursor-pointer"
+                 @click="openQrZoom(pairDialog.result.seed_url)">
+              <lnbits-qrcode
+                :value="pairDialog.result.seed_url"
+                :options="{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"
+                   @click="openQrZoom(pairDialog.result.seed_url)"></q-btn>
           </div>
 
           <q-input
@@ -938,6 +944,29 @@
       </q-card>
     </q-dialog>
 
+    <!-- =============================================================== -->
+    <!-- QR ZOOM DIALOG — fullscreen QR to maximise scan visibility      -->
+    <!-- =============================================================== -->
+    <q-dialog v-model="qrZoom.show" maximized>
+      <q-card class="bg-white text-grey-9 column no-wrap">
+        <q-bar class="bg-white">
+          <q-space></q-space>
+          <q-btn dense flat icon="close" color="grey-9" v-close-popup>
+            <q-tooltip>Close</q-tooltip>
+          </q-btn>
+        </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>
+          <div class="text-caption text-center q-mt-md" :style="{opacity: 0.7}">
+            Point the spire's camera here — tap Close when scanned.
+          </div>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+
     <!-- =============================================================== -->
     <!-- MACHINE DETAIL DIALOG — settlements list + per-row actions      -->
     <!-- =============================================================== -->
@@ -1212,7 +1241,7 @@
     <!-- CASSETTE PUBLISH CONFIRM DIALOG                                 -->
     <!-- =============================================================== -->
     <q-dialog v-model="cassettePublishConfirm.show" persistent>
-      <q-card :style="{minWidth: '480px', maxWidth: '95vw'}">
+      <q-card :style="{width: '480px', maxWidth: '95vw'}">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-h6">Publish cassette config to ATM</div>
           <q-space ></q-space>
@@ -1264,7 +1293,7 @@
     <!-- PARTIAL-DISPENSE DIALOG                                         -->
     <!-- =============================================================== -->
     <q-dialog v-model="partialDispenseDialog.show" persistent>
-      <q-card :style="{minWidth: '480px', maxWidth: '95vw'}">
+      <q-card :style="{width: '480px', maxWidth: '95vw'}">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-h6">Apply partial dispense</div>
           <q-space ></q-space>
@@ -1323,7 +1352,7 @@
     <!-- ADD-NOTE DIALOG                                                 -->
     <!-- =============================================================== -->
     <q-dialog v-model="noteDialog.show" persistent>
-      <q-card :style="{minWidth: '420px', maxWidth: '95vw'}">
+      <q-card :style="{width: '420px', maxWidth: '95vw'}">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-h6">Add note to settlement</div>
           <q-space ></q-space>
@@ -1353,7 +1382,7 @@
     <!-- SUPER-FEE EDIT DIALOG (super-only)                              -->
     <!-- =============================================================== -->
     <q-dialog v-model="superFeeDialog.show" persistent>
-      <q-card :style="{minWidth: '460px', maxWidth: '95vw'}">
+      <q-card :style="{width: '460px', maxWidth: '95vw'}">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-h6">Platform fee (super-only)</div>
           <q-space ></q-space>
@@ -1400,7 +1429,7 @@
     <!-- ADD / EDIT DEPOSIT DIALOG                                       -->
     <!-- =============================================================== -->
     <q-dialog v-model="depositDialog.show" persistent>
-      <q-card :style="{minWidth: '460px', maxWidth: '95vw'}">
+      <q-card :style="{width: '460px', maxWidth: '95vw'}">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-h6"
                v-text="depositDialog.mode === 'add' ? 'Record deposit' : 'Edit deposit'"></div>
@@ -1466,7 +1495,7 @@
     <!-- REJECT DEPOSIT DIALOG (status update with notes)                -->
     <!-- =============================================================== -->
     <q-dialog v-model="rejectDepositDialog.show" persistent>
-      <q-card :style="{minWidth: '420px', maxWidth: '95vw'}">
+      <q-card :style="{width: '420px', maxWidth: '95vw'}">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-h6">Reject deposit</div>
           <q-space ></q-space>
@@ -1495,7 +1524,7 @@
     <!-- ADD / EDIT CLIENT DIALOGS                                       -->
     <!-- =============================================================== -->
     <q-dialog v-model="clientDialog.show" persistent>
-      <q-card :style="{minWidth: '520px', maxWidth: '95vw'}">
+      <q-card :style="{width: '520px', maxWidth: '95vw'}">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-h6" v-text="clientDialog.mode === 'add' ? 'Register liquidity provider' : 'Edit LP'"></div>
           <q-space ></q-space>
@@ -1552,7 +1581,7 @@
     <!-- SETTLE BALANCE DIALOG (closes spirekeeper#2)                -->
     <!-- =============================================================== -->
     <q-dialog v-model="settleBalanceDialog.show" persistent>
-      <q-card :style="{minWidth: '480px', maxWidth: '95vw'}">
+      <q-card :style="{width: '480px', maxWidth: '95vw'}">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-h6">Settle LP balance</div>
           <q-space ></q-space>
@@ -1611,7 +1640,7 @@
     <!-- EDIT MACHINE DIALOG (same fields; PUT instead of POST)          -->
     <!-- =============================================================== -->
     <q-dialog v-model="editMachineDialog.show" persistent>
-      <q-card :style="{minWidth: '480px', maxWidth: '95vw'}">
+      <q-card :style="{width: '480px', maxWidth: '95vw'}">
         <q-card-section class="row items-center q-pb-none">
           <div class="text-h6">Edit machine</div>
           <q-space ></q-space>