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

The top-right "End Session" button overlapped the centered balance /
commission chips, which wrap into the top-right corner on narrower
screens (sintra). Relocate it to a minimal red ✕ icon button grouped
next to the "?" help button in the top-left, clear of the chips. Same
endSession() behavior; shown only while the gate is active.

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

diff --git a/apps/machine/src/views/IdleView.vue b/apps/machine/src/views/IdleView.vue
index a538ff2..cbed320 100644
--- a/apps/machine/src/views/IdleView.vue
+++ b/apps/machine/src/views/IdleView.vue
@@ -173,30 +173,34 @@ function handleCashOut() {
       </div>
     </div>
 
-    <!-- Help button (top-left) -->
-    <Button
-      variant="outline"
-      size="icon"
-      class="absolute top-4 left-4 lg:top-8 lg:left-8 h-14 w-14 lg:h-20 lg:w-20 rounded-full border-2 border-muted-foreground/30 text-2xl lg:text-4xl text-muted-foreground"
-      @click="$router.push('/support')"
-    >
-      ?
-    </Button>
-
-    <!-- End-session button (top-right) — only while the access gate is engaged.
-         A tap-in loads the holder's Bolt Card for the whole session, so give
-         them an explicit way to re-lock the moment they're done instead of
-         relying on the idle timeout (which would leave the card usable by the
-         next person in the meantime). -->
-    <Button
-      v-if="atmStore.accessControl.enabled"
-      variant="outline"
-      size="kiosk"
-      class="absolute top-4 right-4 lg:top-8 lg:right-8 h-14 min-h-0 gap-2 rounded-full border-2 border-destructive/50 px-4 text-sm font-bold text-destructive lg:h-20 lg:px-8 lg:text-2xl"
-      @click="atmStore.endSession()"
-    >
-      🔒 End Session
-    </Button>
+    <!-- Top-left utility buttons: Help, plus an End-session "✕" while the access
+         gate is engaged. Kept in the left corner (not top-right) so they never
+         collide with the centered balance/commission chips, which wrap into the
+         top-right on narrower screens (e.g. sintra). A tap-in loads the holder's
+         Bolt Card for the whole session, so the ✕ gives them an explicit way to
+         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">
+      <Button
+        variant="outline"
+        size="icon"
+        class="h-14 w-14 lg:h-20 lg:w-20 rounded-full border-2 border-muted-foreground/30 text-2xl lg:text-4xl text-muted-foreground"
+        aria-label="Help"
+        @click="$router.push('/support')"
+      >
+        ?
+      </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) -->
     <Button