From 98e373c5ce28564680e2efcd73ef051cc35aa234 Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Fri, 20 Feb 2026 10:45:24 -0500
Subject: [PATCH] fix(machine): make debug bar in-flow and slim down bill
 acceptor

- Debug bar is now a normal flex child (shrink-0) instead of fixed
  overlay, so content naturally fits above it without padding hacks
- Replace bulky dashed bill acceptor box with a single text line

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/machine/src/App.vue              |  7 ++-----
 apps/machine/src/views/CashInView.vue | 20 +++++++-------------
 2 files changed, 9 insertions(+), 18 deletions(-)

diff --git a/apps/machine/src/App.vue b/apps/machine/src/App.vue
index 3db5b80..f165310 100644
--- a/apps/machine/src/App.vue
+++ b/apps/machine/src/App.vue
@@ -32,10 +32,7 @@ function toggleLiveServices() {
 
 <template>
   <div
-    :class="[
-      'flex h-screen w-screen flex-col overflow-hidden bg-background font-sans text-foreground',
-      atmStore.debugMode ? 'pb-28 sm:pb-16' : '',
-    ]"
+    class="flex h-screen w-screen flex-col overflow-hidden bg-background font-sans text-foreground"
   >
     <router-view />
 
@@ -76,7 +73,7 @@ function toggleLiveServices() {
     <!-- Debug overlay (dev only) -->
     <div
       v-if="atmStore.debugMode"
-      class="fixed inset-x-0 bottom-0 z-50 bg-popover font-mono text-xs text-popover-foreground"
+      class="shrink-0 bg-popover font-mono text-xs text-popover-foreground"
     >
       <div class="flex flex-wrap items-center gap-2 px-4 py-2 sm:gap-4">
         <Button
diff --git a/apps/machine/src/views/CashInView.vue b/apps/machine/src/views/CashInView.vue
index 48acc0c..108816f 100644
--- a/apps/machine/src/views/CashInView.vue
+++ b/apps/machine/src/views/CashInView.vue
@@ -241,19 +241,13 @@ const isProcessing = computed(() => atmStore.isPayingInvoice || atmStore.isReque
             </span>
           </div>
 
-          <!-- Bill Acceptor Visual -->
-          <div class="rounded-lg border-2 border-dashed border-white/20 p-6 text-center">
-            <div v-if="balanceLimitReached" class="flex flex-col items-center">
-              <BitcoinIcon :size="48" class="mb-2 grayscale opacity-40" />
-              <p class="text-sm text-muted-foreground">
-                Maximum amount reached — press Done to continue
-              </p>
-            </div>
-            <div v-else>
-              <div class="mb-2 text-4xl">💵 ➡️ 🏧</div>
-              <p class="text-sm text-muted-foreground">Insert bills into the acceptor</p>
-            </div>
-          </div>
+          <!-- Bill Acceptor Status -->
+          <p v-if="balanceLimitReached" class="text-center text-sm text-muted-foreground">
+            Maximum amount reached — press Done to continue
+          </p>
+          <p v-else class="text-center text-sm text-muted-foreground">
+            💵 Insert bills into the acceptor
+          </p>
 
           <!-- Dev: Simulate bill insertion -->
           <Alert v-if="atmStore.debugMode" class="border-red-500/50 bg-red-500/10">