From e14841886709bf9c4769efd1cdc6a2a09980b5bf Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Tue, 31 Mar 2026 10:40:17 -0400
Subject: [PATCH] feat(ui): kiosk-friendly help button and support nav

Add circular outline to the ? help button on idle screen and scale
support page navigation buttons for touchscreen kiosk use.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 apps/machine/src/views/IdleView.vue    |  6 +++---
 apps/machine/src/views/SupportView.vue | 23 +++++++++++++++--------
 2 files changed, 18 insertions(+), 11 deletions(-)

diff --git a/apps/machine/src/views/IdleView.vue b/apps/machine/src/views/IdleView.vue
index f9081e3..f8b4c34 100644
--- a/apps/machine/src/views/IdleView.vue
+++ b/apps/machine/src/views/IdleView.vue
@@ -213,9 +213,9 @@ function handleCashOut() {
 
     <!-- Help button (top-left) -->
     <Button
-      variant="ghost"
-      size="sm"
-      class="absolute top-4 left-4 lg:top-8 lg:left-8 h-14 w-14 lg:h-20 lg:w-20 rounded-full text-2xl lg:text-4xl text-muted-foreground"
+      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')"
     >
       ?
diff --git a/apps/machine/src/views/SupportView.vue b/apps/machine/src/views/SupportView.vue
index 83175ff..a1928b9 100644
--- a/apps/machine/src/views/SupportView.vue
+++ b/apps/machine/src/views/SupportView.vue
@@ -250,19 +250,26 @@ function goBack() {
 
 <template>
   <div class="flex h-dvh flex-col bg-background text-foreground">
-    <!-- Header -->
-    <div class="flex items-center border-b border-border bg-card px-3 py-2 gap-2 relative z-50">
-      <Button variant="outline" size="sm" class="shrink-0" @click="goBack">
-        <span class="text-base">&larr;</span>
-        <span class="ml-1 hidden sm:inline">Back</span>
+    <!-- Header — kiosk-sized touch targets -->
+    <div
+      class="flex items-center border-b border-border bg-card px-4 py-3 lg:px-6 lg:py-4 gap-3 lg:gap-4 relative z-50"
+    >
+      <Button
+        variant="outline"
+        size="kiosk"
+        class="shrink-0 h-12 min-h-0 px-5 text-base lg:h-[7vh] lg:min-h-[60px] lg:px-8 lg:text-2xl"
+        @click="goBack"
+      >
+        <span>&larr;</span>
+        <span class="ml-1">Back</span>
       </Button>
-      <div class="flex gap-1.5 overflow-x-auto">
+      <div class="flex gap-2 lg:gap-3 overflow-x-auto">
         <Button
           v-for="(page, i) in pages"
           :key="page.id"
           :variant="i === activeTab ? 'default' : 'outline'"
-          size="sm"
-          class="shrink-0 text-xs sm:text-sm"
+          size="kiosk"
+          class="shrink-0 h-12 min-h-0 px-5 text-base lg:h-[7vh] lg:min-h-[60px] lg:px-8 lg:text-2xl"
           @click="activeTab = i"
         >
           {{ page.title }}