fix long collection name is not displayed well milvus-io/milvus#27098

Signed-off-by: ruiyi.jiang <[email protected]>
zilliztech · Sep 15, 2023 · 3e6051f · 3e6051f
1 parent d4ee7d5
commit 3e6051f
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 1 deletion.
diff --git 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
@@ -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
@@ -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',