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>

client/src/components/customDialog/CustomDialogTitle.tsx

@@ -17,6 +17,8 @@ const getStyles = makeStyles(() => ({
   },
   title: {
     fontWeight: 500,
+    wordBreak: 'break-all',
+    maxWidth: 500
   },
   icon: {
     fontSize: '24px',

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]}

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',