From 7a42380f0e32e918c3883fd4199704af8cff0fa2 Mon Sep 17 00:00:00 2001 From: Patrick Mulligan Date: Sun, 1 Mar 2026 23:41:18 -0500 Subject: [PATCH] fix(machine): add mobile responsive layout for atm.aiolabs.dev MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The kiosk UI was optimized for 1920px touchscreens, breaking mobile web. Uses Tailwind lg: breakpoints (mobile-first) so mobile works naturally while kiosk sizing applies at 1024px+. No JS branching — pure CSS. - Viewport: width=1920 → width=device-width - Kiosk-only: overflow:hidden and cursor:none behind @media (min-width: 1024px) - IdleView: stack buttons vertically on mobile, justify-around for even spacing - CashInView/CashOutView: stack split panels on mobile (flex-col-reverse lg:flex-row) - QRCode: SVG scales down on small screens via max-w-full - App.vue: hide verbose badges on mobile, debug bar collapses theme/color selectors - Connection/network badges always visible (not gated by isIdle) - Reduce zone-glow animation intensity by half (20px/4px vs 40px/8px) - All lg: values verified to match original kiosk rendering Co-Authored-By: Claude Opus 4.6 --- apps/machine/index.html | 12 ++- apps/machine/src/App.vue | 117 +++++++++++++++++++------ apps/machine/src/components/QRCode.vue | 2 +- apps/machine/src/style.css | 2 +- apps/machine/src/views/CashInView.vue | 112 +++++++++++++---------- apps/machine/src/views/CashOutView.vue | 100 +++++++++++---------- apps/machine/src/views/IdleView.vue | 61 +++++++------ 7 files changed, 257 insertions(+), 149 deletions(-) diff --git a/apps/machine/index.html b/apps/machine/index.html index 4e33433..b1d2992 100644 --- a/apps/machine/index.html +++ b/apps/machine/index.html @@ -3,7 +3,7 @@ - + Lamassu ATM diff --git a/apps/machine/src/App.vue b/apps/machine/src/App.vue index e0e47d2..db90d09 100644 --- a/apps/machine/src/App.vue +++ b/apps/machine/src/App.vue @@ -55,7 +55,9 @@ function toggleLiveServices() {