From 9fa19a71d27bf041ca3e63f1d94184db8ad94aaa Mon Sep 17 00:00:00 2001
From: Marco Beretta <81851188+berry-13@users.noreply.github.com>
Date: Thu, 2 Jul 2026 17:12:57 +0200
Subject: [PATCH] feat: make the skills create button a compact icon button

---
 .../SidePanel/Agents/Tools/SkillsDialog.tsx           | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/client/src/components/SidePanel/Agents/Tools/SkillsDialog.tsx b/client/src/components/SidePanel/Agents/Tools/SkillsDialog.tsx
index cbd0ce5d49..dd0ebd2b3a 100644
--- a/client/src/components/SidePanel/Agents/Tools/SkillsDialog.tsx
+++ b/client/src/components/SidePanel/Agents/Tools/SkillsDialog.tsx
@@ -164,10 +164,13 @@ export default function SkillsDialog({ open, onOpenChange, agentId }: SkillsDial
         </OGDialogDescription>
         <div className="flex h-[80vh] max-h-[760px] flex-col">
           <div className="flex flex-col gap-3 border-b border-border-light px-6 pb-4 pt-5">
-            <div className="flex items-center justify-between gap-2 pr-10">
+            <div className="flex items-center gap-2 pr-10">
               <OGDialogTitle className="text-base font-semibold text-text-primary">
                 {localize('com_ui_skills')}
               </OGDialogTitle>
+            </div>
+
+            <div className="flex items-center gap-2">
               {hasCreateAccess && (
                 <Button
                   type="button"
@@ -175,15 +178,11 @@ export default function SkillsDialog({ open, onOpenChange, agentId }: SkillsDial
                   size="sm"
                   onClick={() => setCreateOpen(true)}
                   aria-label={localize('com_ui_create_skill')}
-                  className="shrink-0 gap-1.5"
+                  className="h-[42px] w-[42px] shrink-0 p-0"
                 >
                   <Plus className="size-4" aria-hidden="true" />
-                  <span className="truncate">{localize('com_ui_create_skill')}</span>
                 </Button>
               )}
-            </div>
-
-            <div className="flex items-center gap-2">
               <div className="relative min-w-0 flex-1">
                 <Search
                   className="pointer-events-none absolute left-3 top-1/2 z-[1] size-4 -translate-y-1/2 text-text-tertiary"