fix(ui): preserve tiny actions and use shared sidebar geometry

Author: Bill Leoutsakos

apps/sim/app/(interfaces)/chat/components/message/components/file-download.tsx

@@ -254,7 +254,7 @@ export function ChatFileDownloadAll({ files }: ChatFileDownloadAllProps) {
         variant='ghost-secondary'
         onClick={handleDownloadAll}
         disabled={isDownloading}
-        size='icon'
+        className='p-0'
       >
         {isDownloading ? (
           <Loader className='size-3' animate />

apps/sim/app/(interfaces)/chat/components/message/message.tsx

@@ -274,7 +274,7 @@ export const ClientChatMessage = memo(function ClientChatMessage({
                       <Button
                         aria-label={isCopied ? 'Copied!' : 'Copy to clipboard'}
                         variant='ghost-secondary'
-                        size='icon'
+                        className='p-0'
                         onClick={() => {
                           const contentToCopy =
                             typeof cleanTextContent === 'string'

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-sidebar-header/table-sidebar-header.tsx

@@ -26,9 +26,10 @@ export const TableSidebarHeaderAction = forwardRef<
     ref={ref}
     variant='ghost'
     size='sm'
+    iconSize='regular'
     iconPadding='sm'
     className={cn(
-      'size-7 focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]',
+      'focus-visible:ring-2 focus-visible:ring-[color-mix(in_srgb,var(--text-muted)_30%,transparent)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--surface-2)]',
       className
     )}
   />

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/editor.tsx

@@ -476,11 +476,11 @@ export function Editor() {
                   {userPermissions.canAdmin && currentBlock.locked && !isAncestorLocked ? (
                     <Button
                       variant='ghost'
-                      size='icon'
+                      className='p-0'
                       onClick={() => collaborativeBatchToggleLocked([currentBlockId!])}
                       aria-label='Unlock block'
                     >
-                      <Unlock className='size-[14px]' />
+                      <Unlock className='size-[14px] text-[var(--text-secondary)]' />
                     </Button>
                   ) : (
                     <div className='flex items-center justify-center'>
@@ -505,7 +505,7 @@ export function Editor() {
                 <Tooltip.Trigger asChild>
                   <Button
                     variant='ghost'
-                    size='icon'
+                    className='p-0'
                     onClick={isRenaming ? handleSaveRename : handleStartRename}
                     disabled={!canEditBlock}
                     aria-label={isRenaming ? 'Save name' : 'Rename block'}
@@ -544,7 +544,7 @@ export function Editor() {
               <Tooltip.Trigger asChild>
                 <Button
                   variant='ghost'
-                  size='icon'
+                  className='p-0'
                   onClick={handleOpenDocs}
                   aria-label='Open documentation'
                 >

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/toolbar/toolbar.tsx

@@ -875,7 +875,12 @@ export const Toolbar = memo(
           <h2 className='text-[var(--text-primary)] text-sm'>Toolbar</h2>
           <div className='flex shrink-0 items-center gap-2'>
             {!isSearchActive ? (
-              <Button variant='ghost' size='icon' aria-label='Search toolbar' onClick={focusSearch}>
+              <Button
+                variant='ghost'
+                className='p-0'
+                aria-label='Search toolbar'
+                onClick={focusSearch}
+              >
                 <Search className='size-[14px]' />
               </Button>
             ) : (

apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/panel.tsx

@@ -915,7 +915,7 @@ export const Panel = memo(function Panel() {
                     <Button
                       aria-label='New Chat'
                       variant='ghost'
-                      size='icon'
+                      className='p-0'
                       onClick={handleCopilotNewChat}
                     >
                       <Plus className='size-[14px]' />
@@ -928,7 +928,7 @@ export const Panel = memo(function Panel() {
                       }}
                     >
                       <DropdownMenuTrigger asChild>
-                        <Button variant='ghost' size='icon' aria-label='Chat history'>
+                        <Button variant='ghost' className='p-0' aria-label='Chat history'>
                           <BubbleChatDelay className='size-[14px]' />
                         </Button>
                       </DropdownMenuTrigger>