From 3e6051f051b12130f2da32f59ee9f961a5f0b2c6 Mon Sep 17 00:00:00 2001
From: "ruiyi.jiang" <ruiyi.jiang@zilliz.com>
Date: Fri, 15 Sep 2023 14:26:09 +0800
Subject: [PATCH] fix long collection name is not displayed well
 https://github.com/milvus-io/milvus/issues/27098

Signed-off-by: ruiyi.jiang <ruiyi.jiang@zilliz.com>
---
 .../components/customDialog/CustomDialogTitle.tsx   |  2 ++
 client/src/pages/collections/Collections.tsx        | 13 ++++++++++++-
 .../overview/collectionCard/CollectionCard.tsx      |  2 ++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/client/src/components/customDialog/CustomDialogTitle.tsx b/client/src/components/customDialog/CustomDialogTitle.tsx
index 7c6fc609..3b2b7cb0 100644
--- a/client/src/components/customDialog/CustomDialogTitle.tsx
+++ b/client/src/components/customDialog/CustomDialogTitle.tsx
@@ -17,6 +17,8 @@ const getStyles = makeStyles(() => ({
   },
   title: {
     fontWeight: 500,
+    wordBreak: 'break-all',
+    maxWidth: 500
   },
   icon: {
     fontSize: '24px',
diff --git a/client/src/pages/collections/Collections.tsx b/client/src/pages/collections/Collections.tsx
index 06c54ba3..d95f66db 100644
--- a/client/src/pages/collections/Collections.tsx
+++ b/client/src/pages/collections/Collections.tsx
@@ -49,6 +49,13 @@ const useStyles = makeStyles((theme: Theme) => ({
   },
   link: {
     color: theme.palette.common.black,
+    display: 'inline-block',
+    wordBreak: 'break-all',
+    whiteSpace: 'nowrap',
+    width: '150px',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    height: '20px',
   },
   highlight: {
     color: theme.palette.primary.main,
@@ -117,7 +124,11 @@ const Collections = () => {
       // const indexStatus = statusRes.find(item => item._name === v._name);
       Object.assign(v, {
         nameElement: (
-          <Link to={`/collections/${v._name}`} className={classes.link}>
+          <Link
+            to={`/collections/${v._name}`}
+            className={classes.link}
+            title={v._name}
+          >
             <Highlighter
               textToHighlight={v._name}
               searchWords={[search]}
diff --git a/client/src/pages/overview/collectionCard/CollectionCard.tsx b/client/src/pages/overview/collectionCard/CollectionCard.tsx
index 2bef791d..202b47c7 100644
--- a/client/src/pages/overview/collectionCard/CollectionCard.tsx
+++ b/client/src/pages/overview/collectionCard/CollectionCard.tsx
@@ -26,6 +26,8 @@ const useStyles = makeStyles((theme: Theme) => ({
       alignItems: 'center',
       margin: theme.spacing(2, 0),
       color: theme.palette.attuDark.main,
+      wordBreak: 'break-all',
+      textAlign: 'left',
       fontSize: '20px',
       lineHeight: '24px',
       fontWeight: 'bold',