From 8c0f15478de9dd12eb3171b162da17547c9f273f Mon Sep 17 00:00:00 2001
From: Brooklyn Nicholson <brooklyn.bb.nicholson@gmail.com>
Date: Wed, 3 Jun 2026 21:56:35 -0500
Subject: [PATCH] style(desktop): shrink button scale, flush overlay sidebar,
 variant-ize stray buttons

- Buttons: smaller default font (14px -> 13px) and tighter padding-driven sizes
  across every variant; the chunky shadcn scale read as oversized in a dense
  desktop UI.
- Overlay split layout (settings / command center): the shared OverlayView top
  padding left the card surface showing as a gap above the sidebar. Move the
  titlebar clearance into each column so the sidebar background runs flush to
  the card's top edge.
- Consolidate buttons that hardcoded size/radius/font onto the proper size
  variants (tooltip-icon-button, overlay close, cron IconAction, SidebarTrigger,
  gateway system button, session-row actions radius, title chip radius, release
  notes link) so styling flows from variant props, not per-call overrides.
  Composer and the inline approval strip are intentionally left as-is.
---
 apps/desktop/src/app/chat/index.tsx                 |  2 +-
 apps/desktop/src/app/chat/sidebar/session-row.tsx   |  2 +-
 apps/desktop/src/app/cron/index.tsx                 |  4 ++--
 .../src/app/overlays/overlay-split-layout.tsx       | 13 +++++++++++--
 apps/desktop/src/app/overlays/overlay-view.tsx      |  9 ++++++---
 apps/desktop/src/app/settings/about-settings.tsx    |  2 +-
 apps/desktop/src/app/settings/index.tsx             |  2 +-
 apps/desktop/src/app/shell/gateway-menu-panel.tsx   |  2 +-
 .../components/assistant-ui/tooltip-icon-button.tsx |  4 ++--
 apps/desktop/src/components/ui/button.tsx           | 10 +++++-----
 apps/desktop/src/components/ui/sidebar.tsx          |  4 ++--
 11 files changed, 33 insertions(+), 21 deletions(-)

diff --git a/apps/desktop/src/app/chat/index.tsx b/apps/desktop/src/app/chat/index.tsx
index a5c5e3833..ac19adc60 100644
--- a/apps/desktop/src/app/chat/index.tsx
+++ b/apps/desktop/src/app/chat/index.tsx
@@ -123,7 +123,7 @@ function ChatHeader({
           title={title}
         >
           <Button
-            className="pointer-events-auto h-6 min-w-0 gap-1 rounded-md border border-transparent bg-transparent px-2 py-0 text-(--ui-text-secondary) hover:border-(--ui-stroke-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground data-[state=open]:border-(--ui-stroke-tertiary) data-[state=open]:bg-(--ui-control-active-background) [-webkit-app-region:no-drag]"
+            className="pointer-events-auto h-6 min-w-0 gap-1 border border-transparent bg-transparent px-2 py-0 text-(--ui-text-secondary) hover:border-(--ui-stroke-tertiary) hover:bg-(--ui-control-hover-background) hover:text-foreground data-[state=open]:border-(--ui-stroke-tertiary) data-[state=open]:bg-(--ui-control-active-background) [-webkit-app-region:no-drag]"
             type="button"
             variant="ghost"
           >
diff --git a/apps/desktop/src/app/chat/sidebar/session-row.tsx b/apps/desktop/src/app/chat/sidebar/session-row.tsx
index aaa623faa..20e14c35b 100644
--- a/apps/desktop/src/app/chat/sidebar/session-row.tsx
+++ b/apps/desktop/src/app/chat/sidebar/session-row.tsx
@@ -170,7 +170,7 @@ export function SidebarSessionRow({
           >
             <Button
               aria-label={`Actions for ${title}`}
-              className="size-5 rounded-md bg-transparent text-transparent transition-colors duration-100 hover:bg-(--ui-control-active-background) hover:text-foreground focus-visible:bg-(--ui-control-active-background) focus-visible:text-foreground focus-visible:ring-0 data-[state=open]:bg-(--ui-control-active-background) data-[state=open]:text-foreground group-hover:text-(--ui-text-tertiary) [&_svg]:size-3.5!"
+              className="size-5 rounded-[4px] bg-transparent text-transparent transition-colors duration-100 hover:bg-(--ui-control-active-background) hover:text-foreground focus-visible:bg-(--ui-control-active-background) focus-visible:text-foreground focus-visible:ring-0 data-[state=open]:bg-(--ui-control-active-background) data-[state=open]:text-foreground group-hover:text-(--ui-text-tertiary) [&_svg]:size-3.5!"
               size="icon"
               title="Session actions"
               variant="ghost"
diff --git a/apps/desktop/src/app/cron/index.tsx b/apps/desktop/src/app/cron/index.tsx
index 16a8c5c1c..dbddcb01a 100644
--- a/apps/desktop/src/app/cron/index.tsx
+++ b/apps/desktop/src/app/cron/index.tsx
@@ -604,8 +604,8 @@ function CronJobRow({
 function IconAction({ children, className, ...props }: Omit<React.ComponentProps<typeof Button>, 'size' | 'variant'>) {
   return (
     <Button
-      className={cn('size-7 text-muted-foreground hover:text-foreground', className)}
-      size="icon"
+      className={cn('text-muted-foreground hover:text-foreground', className)}
+      size="icon-sm"
       variant="ghost"
       {...props}
     >
diff --git a/apps/desktop/src/app/overlays/overlay-split-layout.tsx b/apps/desktop/src/app/overlays/overlay-split-layout.tsx
index 2ce6c85bc..a6e669868 100644
--- a/apps/desktop/src/app/overlays/overlay-split-layout.tsx
+++ b/apps/desktop/src/app/overlays/overlay-split-layout.tsx
@@ -43,7 +43,9 @@ export function OverlaySidebar({ children, className }: OverlaySidebarProps) {
   return (
     <aside
       className={cn(
-        'flex min-h-0 flex-col gap-0.5 overflow-y-auto bg-(--ui-sidebar-surface-background) px-2.5 py-3',
+        // pt clears the floating titlebar/header; the bg itself fills from the
+        // card's top edge so there's no surface-colored gap above the sidebar.
+        'flex min-h-0 flex-col gap-0.5 overflow-y-auto bg-(--ui-sidebar-surface-background) px-2.5 pb-3 pt-[calc(var(--titlebar-height)+1rem)]',
         className
       )}
     >
@@ -54,7 +56,14 @@ export function OverlaySidebar({ children, className }: OverlaySidebarProps) {
 
 export function OverlayMain({ children, className }: OverlayMainProps) {
   return (
-    <main className={cn('flex min-h-0 flex-1 flex-col overflow-hidden bg-transparent p-3', className)}>{children}</main>
+    <main
+      className={cn(
+        'flex min-h-0 flex-1 flex-col overflow-hidden bg-transparent px-3 pb-3 pt-[calc(var(--titlebar-height)+1rem)]',
+        className
+      )}
+    >
+      {children}
+    </main>
   )
 }
 
diff --git a/apps/desktop/src/app/overlays/overlay-view.tsx b/apps/desktop/src/app/overlays/overlay-view.tsx
index 8408be6b3..60fe4ec8a 100644
--- a/apps/desktop/src/app/overlays/overlay-view.tsx
+++ b/apps/desktop/src/app/overlays/overlay-view.tsx
@@ -71,16 +71,19 @@ export function OverlayView({
 
           <Button
             aria-label={closeLabel}
-            className="pointer-events-auto absolute right-3 top-[calc(0.1875rem+var(--titlebar-height)/2)] h-7 w-7 -translate-y-1/2 rounded-md text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground [-webkit-app-region:no-drag]"
+            className="pointer-events-auto absolute right-3 top-[calc(0.1875rem+var(--titlebar-height)/2)] -translate-y-1/2 text-(--ui-text-tertiary) hover:bg-(--chrome-action-hover) hover:text-foreground [-webkit-app-region:no-drag]"
             onClick={closeOverlay}
-            size="icon"
+            size="icon-titlebar"
             variant="ghost"
           >
             <Codicon name="close" size="1rem" />
           </Button>
         </div>
 
-        <div className={cn('min-h-0 flex flex-1 flex-col pt-(--titlebar-height)', contentClassName)}>{children}</div>
+        {/* No top padding here: the split-layout columns own their own
+            titlebar clearance so their backgrounds run flush to the card top
+            (otherwise the card surface shows as a gap above the sidebar). */}
+        <div className={cn('min-h-0 flex flex-1 flex-col', contentClassName)}>{children}</div>
       </div>
     </div>
   )
diff --git a/apps/desktop/src/app/settings/about-settings.tsx b/apps/desktop/src/app/settings/about-settings.tsx
index 991b86062..319f97960 100644
--- a/apps/desktop/src/app/settings/about-settings.tsx
+++ b/apps/desktop/src/app/settings/about-settings.tsx
@@ -145,7 +145,7 @@ export function AboutSettings() {
 
             <Button
               asChild
-              className="ml-auto text-xs text-muted-foreground hover:text-foreground"
+              className="ml-auto text-muted-foreground hover:text-foreground"
               size="sm"
               variant="ghost"
             >
diff --git a/apps/desktop/src/app/settings/index.tsx b/apps/desktop/src/app/settings/index.tsx
index 9aa590c87..21b45414a 100644
--- a/apps/desktop/src/app/settings/index.tsx
+++ b/apps/desktop/src/app/settings/index.tsx
@@ -182,7 +182,7 @@ export function SettingsView({ gateway, onClose, onConfigSaved, onMainModelChang
           </div>
         </OverlaySidebar>
 
-        <OverlayMain className="p-0">
+        <OverlayMain className="px-0 pb-0 pt-[calc(var(--titlebar-height)+1rem)]">
           {activeView === 'config:appearance' ? (
             <AppearanceSettings />
           ) : activeView === 'about' ? (
diff --git a/apps/desktop/src/app/shell/gateway-menu-panel.tsx b/apps/desktop/src/app/shell/gateway-menu-panel.tsx
index fc5a0c218..1d45093eb 100644
--- a/apps/desktop/src/app/shell/gateway-menu-panel.tsx
+++ b/apps/desktop/src/app/shell/gateway-menu-panel.tsx
@@ -78,7 +78,7 @@ export function GatewayMenuPanel({
         <div className="flex items-center">
           <Button
             aria-label="Open system panel"
-            className="size-7 text-muted-foreground hover:text-foreground"
+            className="text-muted-foreground hover:text-foreground"
             onClick={onOpenSystem}
             size="icon-sm"
             title="Open system panel"
diff --git a/apps/desktop/src/components/assistant-ui/tooltip-icon-button.tsx b/apps/desktop/src/components/assistant-ui/tooltip-icon-button.tsx
index 76bce0da2..07c676e99 100644
--- a/apps/desktop/src/components/assistant-ui/tooltip-icon-button.tsx
+++ b/apps/desktop/src/components/assistant-ui/tooltip-icon-button.tsx
@@ -14,11 +14,11 @@ export const TooltipIconButton = forwardRef<HTMLButtonElement, TooltipIconButton
   ({ children, tooltip, side: _side = 'bottom', className, ...rest }, ref) => {
     return (
       <Button
-        size="icon"
+        size="icon-xs"
         variant="ghost"
         {...rest}
         aria-label={tooltip}
-        className={cn('aui-button-icon size-6 p-1', className)}
+        className={cn('aui-button-icon', className)}
         ref={ref}
         title={tooltip}
       >
diff --git a/apps/desktop/src/components/ui/button.tsx b/apps/desktop/src/components/ui/button.tsx
index 21c04a367..f5ffa2f84 100644
--- a/apps/desktop/src/components/ui/button.tsx
+++ b/apps/desktop/src/components/ui/button.tsx
@@ -8,7 +8,7 @@ import { cn } from '@/lib/utils'
 // 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-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",
+  "inline-flex shrink-0 cursor-pointer items-center justify-center gap-1.5 rounded-none text-[0.8125rem] leading-5 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-3.5",
   {
     variants: {
       variant: {
@@ -22,10 +22,10 @@ const buttonVariants = cva(
         link: 'text-primary underline-offset-4 decoration-current/20 hover:underline'
       },
       size: {
-        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',
+        default: 'px-3 py-1 has-[>svg]:px-2.5',
+        xs: "gap-1 px-2 py-0.5 text-[0.6875rem] leading-4 has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: 'px-2.5 py-0.5 has-[>svg]:px-2',
+        lg: 'px-5 py-2 text-sm leading-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]',
diff --git a/apps/desktop/src/components/ui/sidebar.tsx b/apps/desktop/src/components/ui/sidebar.tsx
index eba6fb8e4..7c555166a 100644
--- a/apps/desktop/src/components/ui/sidebar.tsx
+++ b/apps/desktop/src/components/ui/sidebar.tsx
@@ -242,14 +242,14 @@ function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<t
 
   return (
     <Button
-      className={cn('size-7', className)}
+      className={className}
       data-sidebar="trigger"
       data-slot="sidebar-trigger"
       onClick={event => {
         onClick?.(event)
         toggleSidebar()
       }}
-      size="icon"
+      size="icon-sm"
       variant="ghost"
       {...props}
     >