From 27c0edfb795b67137fb8da1dcd6555ae6f49e36e Mon Sep 17 00:00:00 2001
From: kangfenmao <kangfenmao@qq.com>
Date: Sat, 1 Mar 2025 10:41:24 +0800
Subject: [PATCH] fix: Improve ModelAvatar and AssistantItem styling for better
 layout and text handling

- Add min-width and min-height to ModelAvatar to ensure consistent sizing
- Separate AssistantName into a new styled component for better text overflow handling
- Refactor AssistantItem to improve text display and icon alignment
---
 src/renderer/src/components/Avatar/ModelAvatar.tsx | 10 +++++++++-
 src/renderer/src/pages/home/Tabs/AssistantItem.tsx | 14 ++++++--------
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/renderer/src/components/Avatar/ModelAvatar.tsx b/src/renderer/src/components/Avatar/ModelAvatar.tsx
index 9de1f1c2..b7d06d88 100644
--- a/src/renderer/src/components/Avatar/ModelAvatar.tsx
+++ b/src/renderer/src/components/Avatar/ModelAvatar.tsx
@@ -14,7 +14,15 @@ const ModelAvatar: FC<Props> = ({ model, size, props }) => {
   return (
     <Avatar
       src={getModelLogo(model?.id || '')}
-      style={{ width: size, height: size, display: 'flex', alignItems: 'center', justifyContent: 'center' }}
+      style={{
+        width: size,
+        height: size,
+        minWidth: size,
+        minHeight: size,
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+      }}
       {...props}>
       {first(model?.name)}
     </Avatar>
diff --git a/src/renderer/src/pages/home/Tabs/AssistantItem.tsx b/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
index de0fd8e1..ee54cd4f 100644
--- a/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
+++ b/src/renderer/src/pages/home/Tabs/AssistantItem.tsx
@@ -115,10 +115,10 @@ const AssistantItem: FC<AssistantItemProps> = ({ assistant, isActive, onSwitch,
   return (
     <Dropdown menu={{ items: getMenuItems(assistant) }} trigger={['contextMenu']}>
       <Container onClick={handleSwitch} className={isActive ? 'active' : ''}>
-        <AssistantName className="name" title={fullAssistantName}>
+        <AssistantNameRow className="name" title={fullAssistantName}>
           {showAssistantIcon && <ModelAvatar model={assistant.model || defaultModel} size={22} />}
-          {showAssistantIcon ? assistantName : fullAssistantName}
-        </AssistantName>
+          <AssistantName className="text-nowrap">{showAssistantIcon ? assistantName : fullAssistantName}</AssistantName>
+        </AssistantNameRow>
         {isActive && (
           <MenuButton onClick={() => EventEmitter.emit(EVENT_NAMES.SWITCH_TOPIC_SIDEBAR)}>
             <TopicCount className="topics-count">{assistant.topics.length}</TopicCount>
@@ -155,12 +155,8 @@ const Container = styled.div`
   }
 `
 
-const AssistantName = styled.div`
+const AssistantNameRow = styled.div`
   color: var(--color-text);
-  display: -webkit-box;
-  -webkit-line-clamp: 1;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
   font-size: 13px;
   display: flex;
   flex-direction: row;
@@ -168,6 +164,8 @@ const AssistantName = styled.div`
   gap: 5px;
 `
 
+const AssistantName = styled.div``
+
 const MenuButton = styled.div`
   display: flex;
   flex-direction: row;