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>
This commit is contained in:
Patrick Mulligan 2026-02-20 10:45:24 -05:00
commit 98e373c5ce
2 changed files with 9 additions and 18 deletions

View file

@ -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

View file

@ -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">