From 015208500a49e42e1549febc5b9fc52e08915cfb Mon Sep 17 00:00:00 2001 From: Padreug Date: Thu, 2 Jul 2026 19:36:07 +0200 Subject: [PATCH 1/2] 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 bitSpire machine
 - +

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
@@ -901,10 +901,16 @@ into provision-atm. Shown once — copy it now. -
- +
+
+ +
+
+ + + + + + + + + Close + + + + +
+ Point the spire's camera here — tap Close when scanned. +
+ + + + @@ -1212,7 +1241,7 @@ - +
Publish cassette config to ATM
@@ -1264,7 +1293,7 @@ - +
Apply partial dispense
@@ -1323,7 +1352,7 @@ - +
Add note to settlement
@@ -1353,7 +1382,7 @@ - +
Platform fee (super-only)
@@ -1400,7 +1429,7 @@ - +
@@ -1466,7 +1495,7 @@ - +
Reject deposit
@@ -1495,7 +1524,7 @@ - +
@@ -1552,7 +1581,7 @@ - +
Settle LP balance
@@ -1611,7 +1640,7 @@ - +
Edit machine
-- 2.53.0 From 282d8e75c5d6a218bd8620955eeafb883e30a3b9 Mon Sep 17 00:00:00 2001 From: Padreug Date: Thu, 2 Jul 2026 19:58:05 +0200 Subject: [PATCH 2/2] 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 @@
-
+ :max-width="280">
- + +
+ +
Point the spire's camera here — tap Close when scanned.
-- 2.53.0