fix(ui): make spirekeeper dialogs mobile-friendly + add fullscreen QR zoom

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

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