From a0e0c98573a4b9ed116a305e8773aa17da136dda Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Thu, 19 Feb 2026 16:50:10 -0500
Subject: [PATCH] fix(machine): wrap debug footer so theme buttons don't get
 cut off

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/machine/src/App.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/apps/machine/src/App.vue b/apps/machine/src/App.vue
index da50d06..6f1f3f9 100644
--- a/apps/machine/src/App.vue
+++ b/apps/machine/src/App.vue
@@ -75,7 +75,7 @@ function toggleLiveServices() {
       v-if="atmStore.debugMode"
       class="fixed inset-x-0 bottom-0 z-50 bg-popover font-mono text-xs text-popover-foreground"
     >
-      <div class="flex items-center gap-4 px-4 py-2">
+      <div class="flex flex-wrap items-center gap-2 px-4 py-2 sm:gap-4">
         <Button
           variant="ghost"
           size="sm"
@@ -88,8 +88,7 @@ function toggleLiveServices() {
         <Button variant="outline" size="sm" class="h-6 text-xs" @click="toggleLiveServices">
           {{ atmStore.useLiveServices ? 'Switch to Mock' : 'Connect Live' }}
         </Button>
-        <span class="text-muted-foreground">|</span>
-        <div class="flex items-center gap-1">
+        <div class="flex flex-wrap items-center gap-1">
           <Button
             v-for="theme in themes"
             :key="theme.id"