优化agent列表和工作模式的选择滑块样式

src/components/chat/agent-selector.tsx

@@ -242,11 +242,18 @@ export function AgentSelector({
             />
             <span
               className={cn(
-                "overflow-hidden whitespace-nowrap transition-all duration-300",
+                "grid transition-[grid-template-columns] duration-300",
-                isSelected ? "max-w-[80px] opacity-100" : "max-w-0 opacity-0"
+                isSelected ? "grid-cols-[1fr]" : "grid-cols-[0fr]"
               )}
             >
-              {AGENT_LABELS[agent.agent_type]}
+              <span
+                className={cn(
+                  "min-w-0 overflow-hidden whitespace-nowrap transition-opacity duration-300",
+                  isSelected ? "opacity-100" : "opacity-0"
+                )}
+              >
+                {AGENT_LABELS[agent.agent_type]}
+              </span>
             </span>
           </button>
         )

src/components/layout/folder-title-bar.tsx

@@ -301,13 +301,20 @@ export function FolderTitleBar() {
                   />
                   <span
                     className={cn(
-                      "overflow-hidden whitespace-nowrap transition-all duration-300",
+                      "grid transition-[grid-template-columns] duration-300",
                       isActive
-                        ? "max-w-[60px] opacity-100"
+                        ? "grid-cols-[1fr]"
-                        : "max-w-0 opacity-0"
+                        : "grid-cols-[0fr]"
                     )}
                   >
-                    {title}
+                    <span
+                      className={cn(
+                        "min-w-0 overflow-hidden whitespace-nowrap transition-opacity duration-300",
+                        isActive ? "opacity-100" : "opacity-0"
+                      )}
+                    >
+                      {title}
+                    </span>
                   </span>
                 </div>
               )