style(ui): improve layout and text overflow handling in agent components

- Add max-width to agent name tag in ChatNavbar
- Adjust header padding in AgentSettingsPopup
- Replace span with Ellipsis component for agent names to handle overflow

src/renderer/src/pages/home/ChatNavbar.tsx

@@ -179,7 +179,7 @@ const SessionWorkspaceMeta: FC<{ agentId: string; sessionId: string }> = ({ agen
     </div>
   )
 
-  infoItems.push(<InfoTag key="name" text={agent.name ?? ''} />)
+  infoItems.push(<InfoTag key="name" text={agent.name ?? ''} className="max-w-60" />)
 
   if (firstAccessiblePath) {
     infoItems.push(<InfoTag key="path" text={firstAccessiblePath} className="max-w-60" />)

src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx

@@ -114,7 +114,13 @@ const AgentSettingPopupContainer: React.FC<AgentSettingPopupParams> = ({ tab, ag
           display: 'flex',
           flexDirection: 'column'
         },
-        header: { padding: '10px 15px', borderBottom: '0.5px solid var(--color-border)', margin: 0, borderRadius: 0 },
+        header: {
+          padding: '10px 15px',
+          paddingRight: '32px',
+          borderBottom: '0.5px solid var(--color-border)',
+          margin: 0,
+          borderRadius: 0
+        },
         body: {
           padding: 0,
           display: 'flex',

src/renderer/src/pages/settings/AgentSettings/shared.tsx

@@ -1,4 +1,5 @@
 import { Avatar, AvatarProps, cn } from '@heroui/react'
+import Ellipsis from '@renderer/components/Ellipsis'
 import EmojiIcon from '@renderer/components/EmojiIcon'
 import { getAgentDefaultAvatar } from '@renderer/config/agent'
 import { getAgentTypeLabel } from '@renderer/i18n/label'
@@ -38,10 +39,12 @@ export const AgentLabel: React.FC<AgentLabelProps> = ({ agent, classNames, avata
   const emoji = isDefault ? undefined : agent?.configuration?.avatar
 
   return (
-    <div className={cn('flex items-center gap-2', classNames?.container)}>
+    <div className={cn('flex w-full items-center gap-2', classNames?.container)}>
       {isDefault && <Avatar src={src} {...avatarProps} className={cn('h-6 w-6 text-lg', classNames?.avatar)} />}
       {!isDefault && <EmojiIcon emoji={emoji || '⭐️'} className={classNames?.avatar} />}
-      <span className={classNames?.name}>{agent?.name ?? (agent?.type ? getAgentTypeLabel(agent.type) : '')}</span>
+      <Ellipsis className={classNames?.name}>
+        {agent?.name ?? (agent?.type ? getAgentTypeLabel(agent.type) : '')}
+      </Ellipsis>
     </div>
   )
 }