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

src/components/chat/agent-selector.tsx

@@ -242,12 +242,19 @@ 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]"
+              )}
+            >
+              <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,14 +301,21 @@ 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]"
+                    )}
+                  >
+                    <span
+                      className={cn(
+                        "min-w-0 overflow-hidden whitespace-nowrap transition-opacity duration-300",
+                        isActive ? "opacity-100" : "opacity-0"
                       )}
                     >
                       {title}
                     </span>
+                  </span>
                 </div>
               )
             })}