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

Admin UI dialogs unusable on mobile; pairing QR too small to scan #39

New issue
Open
opened 2026-07-02 17:46:25 +00:00 by padreug · 0 comments
padreug commented 2026-07-02 17:46:25 +00:00
Owner
Copy link

Problem

On a phone, the spirekeeper admin dialogs (Add machine, Pair spire, and
the other form dialogs) overflow off the side of the screen and are hard
to use. The seed-URL QR shown after pairing is also too small for a
spire's scan camera to lock onto reliably.

Root cause

Every dialog card set min-width: 480px alongside max-width: 95vw.
When these conflict on a narrow viewport, CSS min-width wins, so the
card is forced wider than the screen and overflows horizontally. Tall
forms (Add machine, 7 fields) can also run off the bottom on short
screens with no way to scroll to the lower fields / buttons.

Fix (this issue)

  • Switch every dialog card from min-width → width so max-width: 95vw can shrink it to fit the viewport.
  • Cap the tall Add-machine form section at 65vh with a scroll
    container so all fields stay reachable.
  • Make the pairing seed-URL QR tappable + add an "Enlarge for scanning"
    button that opens a fullscreen maximized QR sized to the shorter
    viewport edge, on a forced-white card (crisp under dark theme) to
    maximise visibility to the spire's camera.

Follow-up (larger overhaul, not this issue)

The remaining tall form dialogs (client, deposit, edit-machine,
super-fee, settle-balance) got the width fix but not the 65vh scroll
cap. A broader responsive-layout / UI overhaul pass is expected anyway
and can address those + general mobile polish.

## Problem On a phone, the spirekeeper admin dialogs (Add machine, Pair spire, and the other form dialogs) overflow off the side of the screen and are hard to use. The seed-URL QR shown after pairing is also too small for a spire's scan camera to lock onto reliably. ## Root cause Every dialog card set `min-width: 480px` alongside `max-width: 95vw`. When these conflict on a narrow viewport, CSS `min-width` wins, so the card is forced wider than the screen and overflows horizontally. Tall forms (Add machine, 7 fields) can also run off the bottom on short screens with no way to scroll to the lower fields / buttons. ## Fix (this issue) - Switch every dialog card from `min-width` → `width` so `max-width: 95vw` can shrink it to fit the viewport. - Cap the tall Add-machine form section at `65vh` with a scroll container so all fields stay reachable. - Make the pairing seed-URL QR tappable + add an "Enlarge for scanning" button that opens a fullscreen maximized QR sized to the shorter viewport edge, on a forced-white card (crisp under dark theme) to maximise visibility to the spire's camera. ## Follow-up (larger overhaul, not this issue) The remaining tall form dialogs (client, deposit, edit-machine, super-fee, settle-balance) got the width fix but not the `65vh` scroll cap. A broader responsive-layout / UI overhaul pass is expected anyway and can address those + general mobile polish.
Sign in to join this conversation.
No Branch/Tag specified
Branches Tags
main
v0.1.4
v0.1.3
v0.1.2
v0.1.1
v0.1.0
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#39
No description provided.