From 4ce68c130183ea1cafe205e72c762e9938ffec98 Mon Sep 17 00:00:00 2001
From: Padreug <padreug@aiolabs.dev>
Date: Sun, 16 Aug 2026 08:47:22 +0200
Subject: [PATCH] =?UTF-8?q?fix(access):=20put=20End=20Session=20=E2=9C=95?=
 =?UTF-8?q?=20left=20of=20Help,=20solid=20destructive=20red?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Per on-device review: order the top-left group ✕ then ?, and use the
`destructive` button variant so the exit swatch is a solid, theme-aware
red (--destructive is scoped per colorscheme) rather than a subtle
outline that didn't read as an exit.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_018ivBosaWmv8vwFE7ejrdHW
---
 apps/machine/src/views/IdleView.vue | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/apps/machine/src/views/IdleView.vue b/apps/machine/src/views/IdleView.vue
index cbed320..cad3758 100644
--- a/apps/machine/src/views/IdleView.vue
+++ b/apps/machine/src/views/IdleView.vue
@@ -181,6 +181,19 @@ function handleCashOut() {
          re-lock the moment they're done rather than waiting out the idle timeout
          (which would leave the card usable by the next person meanwhile). -->
     <div class="absolute top-4 left-4 lg:top-8 lg:left-8 flex items-center gap-2 lg:gap-3">
+      <!-- End session first (leftmost): a solid `destructive` swatch so the exit
+           reads as red in every theme (--destructive is theme-scoped). Shown
+           only while the access gate is engaged. -->
+      <Button
+        v-if="atmStore.accessControl.enabled"
+        variant="destructive"
+        size="icon"
+        class="h-14 w-14 lg:h-20 lg:w-20 rounded-full text-2xl lg:text-4xl font-bold"
+        aria-label="End session"
+        @click="atmStore.endSession()"
+      >
+        ✕
+      </Button>
       <Button
         variant="outline"
         size="icon"
@@ -190,16 +203,6 @@ function handleCashOut() {
       >
         ?
       </Button>
-      <Button
-        v-if="atmStore.accessControl.enabled"
-        variant="outline"
-        size="icon"
-        class="h-14 w-14 lg:h-20 lg:w-20 rounded-full border-2 border-destructive/50 text-2xl lg:text-4xl font-bold text-destructive"
-        aria-label="End session"
-        @click="atmStore.endSession()"
-      >
-        ✕
-      </Button>
     </div>
 
     <!-- Debug toggle (only visible when debug bar is hidden, never in production) -->