From 4c67f23a162c27dc466eb66b1c9fc94c10b6bbba Mon Sep 17 00:00:00 2001
From: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
Date: Wed, 9 Oct 2024 13:54:00 +0530
Subject: [PATCH] fix(catalog-react) : fixing text overflow

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>
---
 .../EntityDisplayName/EntityDisplayName.tsx         | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx
index 68d5ecefdb..0c9622080a 100644
--- a/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx
+++ b/plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx
@@ -20,6 +20,7 @@ import Tooltip from '@material-ui/core/Tooltip';
 import { Theme, makeStyles } from '@material-ui/core/styles';
 import React from 'react';
 import { useEntityPresentation } from '../../apis';
+import Typography from '@material-ui/core/Typography';
 
 /**
  * The available style class keys for {@link EntityDisplayName}, under the name
@@ -34,6 +35,7 @@ const useStyles = makeStyles(
     root: {
       display: 'inline-flex',
       alignItems: 'center',
+      maxWidth: '100%',
     },
     icon: {
       marginRight: theme.spacing(0.5),
@@ -42,6 +44,13 @@ const useStyles = makeStyles(
         verticalAlign: 'middle',
       },
     },
+    truncate: {
+      whiteSpace: 'nowrap',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      maxWidth: '100%',
+      display: 'block',
+    },
   }),
   { name: 'CatalogReactEntityDisplayName' },
 );
@@ -77,7 +86,9 @@ export const EntityDisplayName = (
   );
 
   // The innermost "body" content
-  let content = <>{primaryTitle}</>;
+  let content = (
+    <Typography className={classes.truncate}>{primaryTitle}</Typography>
+  );
 
   // Optionally an icon, and wrapper around them both
   content = (