aiolabs/spirekeeper
9
0
Fork 0
Code Issues 25 Pull requests Projects Releases Packages Wiki Activity Actions

fix(ui): make admin dialogs mobile-friendly + add fullscreen QR zoom #40

Merged
padreug merged 2 commits from fix/mobile-friendly-dialogs-and-QR-zoom into main 2026-07-02 18:56:05 +00:00
Conversation 0 Commits 2 Files changed 2 +70 -16
padreug commented 2026-07-02 17:46:43 +00:00
Owner
Copy link

Addresses #39.

Why

On a phone the admin dialogs overflowed off the side of the screen and
were hard to use, and the pairing seed-URL QR was too small for a
spire's scan camera. Root cause: dialog cards used min-width: 480px
next to max-width: 95vw — when they conflict on a narrow viewport CSS
min-width wins, forcing the card wider than the screen.

Changes

  • Horizontal overflow: switch all 11 dialog cards from minWidth →
    width so maxWidth: 95vw can shrink them to fit. Mechanical,
    zero-risk, so applied across all dialogs rather than only the two
    reported.
  • Vertical overflow: cap the tall Add-machine form section at 65vh
    with a scroll container so every field stays reachable on short
    screens.
  • Pairing QR zoom: the seed-URL QR is now tappable and has an
    "Enlarge for scanning" button opening a fullscreen maximized QR
    (qrZoom dialog) sized to the shorter viewport edge minus a margin,
    on a forced-white card so it stays crisp/scannable under dark theme —
    maximising visibility to the spire's camera.

Verification

  • node --check static/js/index.js passes
  • <q-dialog> open/close tags balance (13/13)
  • No minWidth remaining in the template

Follow-up (per #39): the other tall form dialogs got the width fix but
not the 65vh scroll cap — deferred to the broader UI overhaul.

🤖 Generated with Claude Code

Addresses #39. ## Why On a phone the admin dialogs overflowed off the side of the screen and were hard to use, and the pairing seed-URL QR was too small for a spire's scan camera. Root cause: dialog cards used `min-width: 480px` next to `max-width: 95vw` — when they conflict on a narrow viewport CSS `min-width` wins, forcing the card wider than the screen. ## Changes - **Horizontal overflow:** switch all 11 dialog cards from `minWidth` → `width` so `maxWidth: 95vw` can shrink them to fit. Mechanical, zero-risk, so applied across all dialogs rather than only the two reported. - **Vertical overflow:** cap the tall Add-machine form section at `65vh` with a `scroll` container so every field stays reachable on short screens. - **Pairing QR zoom:** the seed-URL QR is now tappable and has an "Enlarge for scanning" button opening a fullscreen maximized QR (`qrZoom` dialog) sized to the shorter viewport edge minus a margin, on a forced-white card so it stays crisp/scannable under dark theme — maximising visibility to the spire's camera. ## Verification - `node --check static/js/index.js` passes - `<q-dialog>` open/close tags balance (13/13) - No `minWidth` remaining in the template Follow-up (per #39): the other tall form dialogs got the width fix but not the `65vh` scroll cap — deferred to the broader UI overhaul. 🤖 Generated with [Claude Code](https://claude.com/claude-code)
fix(ui): make spirekeeper dialogs mobile-friendly + add fullscreen QR zoom
Some checks failed
ci.yml / fix(ui): make spirekeeper dialogs mobile-friendly + add fullscreen QR zoom (pull_request) Failing after 0s
Details
015208500a 
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.
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
Details
282d8e75c5 
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`.
padreug deleted branch fix/mobile-friendly-dialogs-and-QR-zoom 2026-07-02 18:56:05 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
Labels
Clear labels
No items
No labels
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
aiolabs/spirekeeper!40
No description provided.