From a9da1067b32655214e70af8145ee5e124a4d2e84 Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Thu, 19 Feb 2026 16:47:26 -0500
Subject: [PATCH] feat(machine): responsive mobile-friendly layout with
 Tailwind v4

- IdleView: stack cards vertically on mobile, side-by-side on sm+
- Scale logo, cards, text, and badges down for small screens
- QR overlays use smaller codes on mobile (280px vs 400px)
- Status badges wrap and use smaller text on mobile
- Hide subtitle text on mobile cards to save space

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/machine/src/App.vue            |  6 ++-
 apps/machine/src/views/IdleView.vue | 70 ++++++++++++++++++-----------
 2 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/apps/machine/src/App.vue b/apps/machine/src/App.vue
index 5c990bf..da50d06 100644
--- a/apps/machine/src/App.vue
+++ b/apps/machine/src/App.vue
@@ -37,10 +37,12 @@ function toggleLiveServices() {
     <router-view />
 
     <!-- Connection status + balance (top right) -->
-    <div class="fixed right-4 top-4 z-50 flex items-center gap-2">
+    <div
+      class="fixed right-2 top-2 z-50 flex flex-wrap items-center justify-end gap-1 sm:right-4 sm:top-4 sm:gap-2"
+    >
       <Badge
         v-if="atmStore.balanceSats !== null"
-        class="bg-bitcoin/20 font-mono text-bitcoin border border-bitcoin/30"
+        class="bg-bitcoin/20 font-mono text-bitcoin border border-bitcoin/30 text-xs sm:text-sm"
       >
         bal: {{ formatSats(atmStore.balanceSats) }} sats
       </Badge>
diff --git a/apps/machine/src/views/IdleView.vue b/apps/machine/src/views/IdleView.vue
index 5d44f38..650dec8 100644
--- a/apps/machine/src/views/IdleView.vue
+++ b/apps/machine/src/views/IdleView.vue
@@ -59,52 +59,66 @@ function handleCashOut() {
 </script>
 
 <template>
-  <div class="flex flex-1 flex-col items-center justify-center gap-8 p-8">
+  <div class="flex flex-1 flex-col items-center justify-center gap-4 p-4 sm:gap-6 md:gap-8 md:p-8">
     <!-- Logo -->
-    <div class="flex flex-col items-center gap-2">
+    <div class="flex flex-col items-center gap-1 sm:gap-2">
       <img
         src="/logo.png"
         alt="Lamassu"
-        class="h-40 w-40 animate-float drop-shadow-[0_0_24px_var(--primary)]"
+        class="h-20 w-20 animate-float drop-shadow-[0_0_24px_var(--primary)] sm:h-28 sm:w-28 md:h-40 md:w-40"
       />
-      <h1 class="text-4xl font-bold text-primary">Bitcoinmat</h1>
+      <h1 class="text-2xl font-bold text-primary sm:text-3xl md:text-4xl">Bitcoinmat</h1>
       <!-- Footer badges -->
-      <div class="mt-4 flex items-center gap-4">
-        <Badge variant="outline" class="border-success text-success">No KYC</Badge>
-        <Badge variant="outline" class="border-primary text-primary">No Registration</Badge>
-        <Badge variant="outline" class="border-bitcoin text-bitcoin">Just Bitcoin</Badge>
+      <div class="mt-2 flex flex-wrap items-center justify-center gap-2 sm:mt-4 sm:gap-4">
+        <Badge variant="outline" class="border-success text-success text-xs sm:text-sm"
+          >No KYC</Badge
+        >
+        <Badge variant="outline" class="border-primary text-primary text-xs sm:text-sm"
+          >No Registration</Badge
+        >
+        <Badge variant="outline" class="border-bitcoin text-bitcoin text-xs sm:text-sm"
+          >Just Bitcoin</Badge
+        >
       </div>
     </div>
 
     <!-- Action Buttons -->
-    <div class="flex gap-8">
+    <div class="flex flex-col gap-4 sm:flex-row sm:gap-6 md:gap-8">
       <!-- Buy Bitcoin -->
       <Card
-        class="h-64 w-64 cursor-pointer border-2 border-success/50 bg-success/20 transition-all hover:scale-105 hover:border-success hover:bg-success/30 active:scale-95"
+        class="h-40 w-40 cursor-pointer border-2 border-success/50 bg-success/20 transition-all hover:scale-105 hover:border-success hover:bg-success/30 active:scale-95 sm:h-52 sm:w-52 md:h-64 md:w-64"
         @click="handleCashIn"
       >
-        <CardContent class="flex h-full flex-col items-center justify-center gap-3 p-6">
-          <BitcoinIcon :size="64" class="shrink-0" />
-          <span class="text-xl font-bold text-success">Buy Bitcoin</span>
-          <span class="text-sm text-foreground/70">Insert cash, receive sats</span>
+        <CardContent
+          class="flex h-full flex-col items-center justify-center gap-2 p-4 sm:gap-3 sm:p-6"
+        >
+          <BitcoinIcon :size="48" class="shrink-0 sm:hidden" />
+          <BitcoinIcon :size="64" class="hidden shrink-0 sm:block" />
+          <span class="text-lg font-bold text-success sm:text-xl">Buy Bitcoin</span>
+          <span class="hidden text-sm text-foreground/70 sm:block">Insert cash, receive sats</span>
         </CardContent>
       </Card>
 
       <!-- Sell Bitcoin -->
       <Card
-        class="h-64 w-64 cursor-pointer border-2 border-warning/50 bg-warning/20 transition-all hover:scale-105 hover:border-warning hover:bg-warning/30 active:scale-95"
+        class="h-40 w-40 cursor-pointer border-2 border-warning/50 bg-warning/20 transition-all hover:scale-105 hover:border-warning hover:bg-warning/30 active:scale-95 sm:h-52 sm:w-52 md:h-64 md:w-64"
         @click="handleCashOut"
       >
-        <CardContent class="flex h-full flex-col items-center justify-center gap-3 p-6">
-          <span class="text-7xl">💵</span>
-          <span class="text-xl font-bold text-warning">Sell Bitcoin</span>
-          <span class="text-sm text-foreground/70">Pay invoice, receive cash</span>
+        <CardContent
+          class="flex h-full flex-col items-center justify-center gap-2 p-4 sm:gap-3 sm:p-6"
+        >
+          <span class="text-5xl sm:text-7xl">💵</span>
+          <span class="text-lg font-bold text-warning sm:text-xl">Sell Bitcoin</span>
+          <span class="hidden text-sm text-foreground/70 sm:block">Pay invoice, receive cash</span>
         </CardContent>
       </Card>
     </div>
 
     <!-- Dev QR buttons -->
-    <div v-if="atmStore.debugMode" class="flex items-center gap-4">
+    <div
+      v-if="atmStore.debugMode"
+      class="flex flex-wrap items-center justify-center gap-2 sm:gap-4"
+    >
       <Button
         v-if="lndconnectUrl"
         variant="ghost"
@@ -128,12 +142,13 @@ function handleCashOut() {
     <!-- Zeus QR fullscreen overlay -->
     <div
       v-if="showZeusQR"
-      class="fixed inset-0 z-[100] flex flex-col items-center justify-center gap-4 bg-black/90"
+      class="fixed inset-0 z-[100] flex flex-col items-center justify-center gap-4 bg-black/90 p-4"
       @click.self="showZeusQR = false"
     >
       <p class="text-sm text-white/70">Scan with Zeus to connect to lnd-alice</p>
-      <div class="rounded-2xl bg-white p-4">
-        <QRCode :value="lndconnectUrl" :size="400" />
+      <div class="rounded-2xl bg-white p-3 sm:p-4">
+        <QRCode :value="lndconnectUrl" :size="280" class="sm:hidden" />
+        <QRCode :value="lndconnectUrl" :size="400" class="hidden sm:block" />
       </div>
       <div class="flex items-center gap-2">
         <Button
@@ -153,14 +168,15 @@ function handleCashOut() {
     <!-- Lightning.Pub nprofile QR fullscreen overlay -->
     <div
       v-if="showLpQR"
-      class="fixed inset-0 z-[100] flex flex-col items-center justify-center gap-4 bg-black/90"
+      class="fixed inset-0 z-[100] flex flex-col items-center justify-center gap-4 bg-black/90 p-4"
       @click.self="showLpQR = false"
     >
       <p class="text-sm text-white/70">Lightning.Pub nprofile</p>
-      <div class="rounded-2xl bg-white p-4">
-        <QRCode :value="lpNprofile" :size="400" />
+      <div class="rounded-2xl bg-white p-3 sm:p-4">
+        <QRCode :value="lpNprofile" :size="280" class="sm:hidden" />
+        <QRCode :value="lpNprofile" :size="400" class="hidden sm:block" />
       </div>
-      <code class="max-w-md truncate text-xs text-white/50">{{ lpNprofile }}</code>
+      <code class="max-w-[90vw] truncate text-xs text-white/50 sm:max-w-md">{{ lpNprofile }}</code>
       <div class="flex items-center gap-2">
         <Button variant="outline" size="sm" class="text-white" @click="copyToClipboard(lpNprofile)">
           {{ copied ? 'Copied!' : 'Copy' }}