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.
This commit is contained in:
Brooklyn Nicholson
2026-06-03 21:56:35 -05:00
parent 712bf4d8e4
commit 8c0f15478d
11 changed files with 33 additions and 21 deletions
@@ -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}
>
+5 -5
View File
@@ -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]',
+2 -2
View File
@@ -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}
>