From b8a84f62acce8f396328fcfc82117718b049a330 Mon Sep 17 00:00:00 2001
From: icarus <eurfelux@gmail.com>
Date: Sun, 28 Sep 2025 14:17:04 +0800
Subject: [PATCH] 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                | 2 +-
 .../pages/settings/AgentSettings/AgentSettingsPopup.tsx   | 8 +++++++-
 src/renderer/src/pages/settings/AgentSettings/shared.tsx  | 7 +++++--
 3 files changed, 13 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/pages/home/ChatNavbar.tsx b/src/renderer/src/pages/home/ChatNavbar.tsx
index eb639fc867..22c0887ae8 100644
--- a/src/renderer/src/pages/home/ChatNavbar.tsx
+++ b/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" />)
diff --git a/src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx b/src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx
index c9cc7e9baa..93484bfe1a 100644
--- a/src/renderer/src/pages/settings/AgentSettings/AgentSettingsPopup.tsx
+++ b/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',
diff --git a/src/renderer/src/pages/settings/AgentSettings/shared.tsx b/src/renderer/src/pages/settings/AgentSettings/shared.tsx
index c87d5c84c7..1eb2a87f69 100644
--- a/src/renderer/src/pages/settings/AgentSettings/shared.tsx
+++ b/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>
   )
 }