From 712bf4d8e4294fba44f1b5782033dad3160a74f8 Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 21:50:03 -0500
Subject: [PATCH] style(desktop): padding-driven, square non-icon buttons

Default button sizing was vanilla-shadcn chunky (fixed h-9, 16px padding) and
inconsistent with the icon-button radius pass. Size text variants by
padding + line-height instead of fixed heights so they stay snug and scale
with content, and drop the radius on non-icon buttons (icon buttons keep the
shared 4px). Move the update-overlay CTAs off a hardcoded h-10 onto the
padding-based lg variant. Composer and the inline approval strip are untouched.
---
 apps/desktop/src/app/updates-overlay.tsx  | 10 +++++-----
 apps/desktop/src/components/ui/button.tsx | 13 ++++++++-----
 2 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/apps/desktop/src/app/updates-overlay.tsx b/apps/desktop/src/app/updates-overlay.tsx
index 39cbe97c1..1e0c6af66 100644
--- a/apps/desktop/src/app/updates-overlay.tsx
+++ b/apps/desktop/src/app/updates-overlay.tsx
@@ -222,7 +222,7 @@ function IdleView({
       </div>
 
       <div className="grid gap-2">
-        <Button className="h-10 text-sm font-semibold" onClick={onInstall} size="default">
+        <Button className="font-semibold" onClick={onInstall} size="lg">
           Update now
         </Button>
         <button
@@ -267,9 +267,9 @@ function ManualView({ command, onDone }: { command: string; onDone: () => void }
       </div>
 
       <button
-        type="button"
-        onClick={handleCopy}
         className="group flex w-full items-center justify-between gap-3 rounded-xl border border-border/70 bg-muted/30 px-4 py-3 text-left transition-colors hover:border-border hover:bg-muted/50"
+        onClick={handleCopy}
+        type="button"
       >
         <code className="select-all font-mono text-sm text-foreground">
           <span className="text-muted-foreground">$ </span>
@@ -294,7 +294,7 @@ function ManualView({ command, onDone }: { command: string; onDone: () => void }
         Hermes will pick up the new version next time you launch it.
       </p>
 
-      <Button className="h-10 text-sm font-semibold" onClick={onDone} variant="outline">
+      <Button className="font-semibold" onClick={onDone} size="lg" variant="outline">
         Done
       </Button>
     </div>
@@ -352,7 +352,7 @@ function ErrorView({ message, onDismiss, onRetry }: { message: string; onDismiss
       </div>
 
       <div className="grid gap-2">
-        <Button className="h-10 text-sm font-semibold" onClick={onRetry}>
+        <Button className="font-semibold" onClick={onRetry} size="lg">
           Try again
         </Button>
         <button
diff --git a/apps/desktop/src/components/ui/button.tsx b/apps/desktop/src/components/ui/button.tsx
index c715af4ca..21c04a367 100644
--- a/apps/desktop/src/components/ui/button.tsx
+++ b/apps/desktop/src/components/ui/button.tsx
@@ -4,8 +4,11 @@ import * as React from 'react'
 
 import { cn } from '@/lib/utils'
 
+// Text buttons are square (no radius) and sized by padding + line-height — no
+// fixed heights — so they stay snug and scale with content. Only icon buttons
+// (inherently square) carry the shared 4px radius.
 const buttonVariants = cva(
-  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-none text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[0.1875rem] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-default disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
@@ -19,10 +22,10 @@ const buttonVariants = cva(
         link: 'text-primary underline-offset-4 decoration-current/20 hover:underline'
       },
       size: {
-        default: 'h-9 px-4 py-2 has-[>svg]:px-3',
-        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
-        sm: 'h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5',
-        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',
+        default: 'px-3.5 py-1.5 has-[>svg]:px-3',
+        xs: "gap-1 px-2 py-1 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'gap-1.5 px-3 py-1 has-[>svg]:px-2.5',
+        lg: 'px-6 py-2.5 has-[>svg]:px-4',
         icon: 'size-9 rounded-[4px]',
         'icon-xs': "size-6 rounded-[4px] [&_svg:not([class*='size-'])]:size-3",
         'icon-sm': 'size-8 rounded-[4px]',