From cea774c3adf9ee5708c44fabafa0c5e3acf2298e Mon Sep 17 00:00:00 2001
From: Patrick Mulligan <patjmulligan@protonmail.com>
Date: Sun, 1 Mar 2026 12:08:06 -0500
Subject: [PATCH] feat(machine): add kiosk touch targets and viewport for
 1920px

Scale up button sizes (kiosk, kiosk-lg, kiosk-icon variants), add
active:scale feedback, set viewport to 1920px fixed width, hide cursor,
and bump card title/description sizes for touch-screen readability.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 apps/machine/index.html                        |  5 ++++-
 apps/machine/src/components/ui/button/index.ts | 18 ++++++++++++------
 .../src/components/ui/card/CardDescription.vue |  2 +-
 .../src/components/ui/card/CardTitle.vue       |  2 +-
 4 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/apps/machine/index.html b/apps/machine/index.html
index 9d92055..4e33433 100644
--- a/apps/machine/index.html
+++ b/apps/machine/index.html
@@ -3,13 +3,15 @@
   <head>
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="viewport" content="width=1920, initial-scale=1.0, user-scalable=no" />
     <title>Lamassu ATM</title>
     <style>
       /* Prevent text selection and context menu on kiosk */
       * {
         user-select: none;
         -webkit-user-select: none;
+        touch-action: manipulation;
+        -webkit-tap-highlight-color: transparent;
       }
       html,
       body {
@@ -17,6 +19,7 @@
         padding: 0;
         overflow: hidden;
         background: #000;
+        cursor: none;
       }
     </style>
   </head>
diff --git a/apps/machine/src/components/ui/button/index.ts b/apps/machine/src/components/ui/button/index.ts
index 4c4bd6f..81626d8 100644
--- a/apps/machine/src/components/ui/button/index.ts
+++ b/apps/machine/src/components/ui/button/index.ts
@@ -4,17 +4,19 @@ import { cva } from 'class-variance-authority'
 export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all active:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90 active:bg-primary/80',
         destructive:
-          'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+          'bg-destructive text-white hover:bg-destructive/90 active:bg-destructive/80 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
         outline:
-          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
+          'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground active:bg-accent/80 dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 active:bg-secondary/70',
+        ghost:
+          'hover:bg-accent hover:text-accent-foreground active:bg-accent/50 dark:hover:bg-accent/50',
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
@@ -24,6 +26,10 @@ export const buttonVariants = cva(
         icon: 'size-9',
         'icon-sm': 'size-8',
         'icon-lg': 'size-10',
+        kiosk: 'h-[7vh] min-h-[70px] px-8 py-3 text-2xl rounded-xl',
+        'kiosk-lg': 'h-[9vh] min-h-[80px] px-10 py-4 text-[1.75rem] rounded-xl',
+        'kiosk-icon': 'size-[6vh] min-w-[60px] min-h-[60px] rounded-xl text-2xl',
+        'kiosk-icon-lg': 'size-[8vh] min-w-[70px] min-h-[70px] rounded-xl text-3xl',
       },
     },
     defaultVariants: {
diff --git a/apps/machine/src/components/ui/card/CardDescription.vue b/apps/machine/src/components/ui/card/CardDescription.vue
index d74841b..7b738da 100644
--- a/apps/machine/src/components/ui/card/CardDescription.vue
+++ b/apps/machine/src/components/ui/card/CardDescription.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <p data-slot="card-description" :class="cn('text-muted-foreground text-sm', props.class)">
+  <p data-slot="card-description" :class="cn('text-muted-foreground text-xl', props.class)">
     <slot />
   </p>
 </template>
diff --git a/apps/machine/src/components/ui/card/CardTitle.vue b/apps/machine/src/components/ui/card/CardTitle.vue
index a9e4a45..06e77aa 100644
--- a/apps/machine/src/components/ui/card/CardTitle.vue
+++ b/apps/machine/src/components/ui/card/CardTitle.vue
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <h3 data-slot="card-title" :class="cn('leading-none font-semibold', props.class)">
+  <h3 data-slot="card-title" :class="cn('leading-tight font-semibold text-3xl', props.class)">
     <slot />
   </h3>
 </template>