fix(ui): make the zoom QR actually fill the screen
Some checks failed
ci.yml / fix(ui): make the zoom QR actually fill the screen (pull_request) Failing after 0s

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`.
This commit is contained in:
Padreug 2026-07-02 19:58:05 +02:00
commit 282d8e75c5
2 changed files with 16 additions and 8 deletions

View file

@ -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
},