From ec4757ead1b8d4bc91c8a189e9d57431fa2cde98 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 14 Jul 2025 23:00:36 +0000
Subject: [PATCH] Refactor component menu

Reduce the height of the component menu elements and adjust the spacing of the description text.
---
 src/components/AgentBuilderSidebar.tsx | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/AgentBuilderSidebar.tsx b/src/components/AgentBuilderSidebar.tsx
index fe086c5..1fdb786 100644
--- a/src/components/AgentBuilderSidebar.tsx
+++ b/src/components/AgentBuilderSidebar.tsx
@@ -103,20 +103,20 @@ const AgentBuilderSidebar = memo(({ onAddNode }: AgentBuilderSidebarProps) => {
           return (
             <Card
               key={template.type}
-              className="p-3 cursor-grab active:cursor-grabbing border-border hover:border-primary/50 transition-colors"
+              className="p-2 cursor-grab active:cursor-grabbing border-border hover:border-primary/50 transition-colors"
               draggable
               onDragStart={(e) => onDragStart(e, template.type)}
               onClick={() => onAddNode(template.type)}
             >
-              <div className="flex items-start space-x-3">
-                <div className="p-2 rounded-lg bg-primary/10">
-                  <IconComponent className="w-4 h-4 text-primary" />
+              <div className="flex items-start space-x-2">
+                <div className="p-1.5 rounded-md bg-primary/10 flex-shrink-0">
+                  <IconComponent className="w-3.5 h-3.5 text-primary" />
                 </div>
                 <div className="flex-1 min-w-0">
                   <h4 className="text-sm font-medium text-foreground truncate">
                     {template.label}
                   </h4>
-                  <p className="text-xs text-muted-foreground mt-1">
+                  <p className="text-xs text-muted-foreground leading-tight">
                     {template.description}
                   </p>
                 </div>