fix: if the conversation name is too long, it will overflow the curre…

…nt item. infiniflow#607 (infiniflow#972) ### What problem does this PR solve? fix: if the conversation name is too long, it will overflow the current item. infiniflow#607 ### Type of change - [x] Bug Fix (non-breaking change which fixes an issue)
Halfknow · May 29, 2024 · 984822e · 984822e
1 parent cadfc5b
commit 984822e
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 2 deletions.
diff --git a/web/src/pages/chat/index.less b/web/src/pages/chat/index.less
@@ -8,6 +8,7 @@
 
     .chatAppContent {
       overflow-y: auto;
+      width: 100%;
     }
 
     .chatAppCard {

diff --git a/web/src/pages/chat/index.tsx b/web/src/pages/chat/index.tsx
@@ -17,6 +17,7 @@ import {
   Space,
   Spin,
   Tag,
+  Typography,
 } from 'antd';
 import { MenuItemProps } from 'antd/lib/menu/MenuItem';
 import classNames from 'classnames';
@@ -46,6 +47,8 @@ import { IDialog } from '@/interfaces/database/chat';
 import ChatOverviewModal from './chat-overview-modal';
 import styles from './index.less';
 
+const { Text } = Typography;
+
 const Chat = () => {
   const dialogList = useSelectFirstDialogOnMount();
   const { onRemoveDialog } = useDeleteDialog();
@@ -260,7 +263,14 @@ const Chat = () => {
                     <Space size={15}>
                       <Avatar src={x.icon} shape={'square'} />
                       <section>
-                        <b>{x.name}</b>
+                        <b>
+                          <Text
+                            ellipsis={{ tooltip: x.name }}
+                            style={{ width: 130 }}
+                          >
+                            {x.name}
+                          </Text>
+                        </b>
                         <div>{x.description}</div>
                       </section>
                     </Space>
@@ -315,7 +325,14 @@ const Chat = () => {
                   })}
                 >
                   <Flex justify="space-between" align="center">
-                    <div>{x.name}</div>
+                    <div>
+                      <Text
+                        ellipsis={{ tooltip: x.name }}
+                        style={{ width: 150 }}
+                      >
+                        {x.name}
+                      </Text>
+                    </div>
                     {conversationActivated === x.id && x.id !== '' && (
                       <section>
                         <Dropdown