fix(catalog-react) : moving styles to parent

Signed-off-by: its-mitesh-kumar <itsmiteshkumar98@gmail.com>

plugins/catalog-react/src/components/EntityDisplayName/EntityDisplayName.tsx

@@ -42,10 +42,6 @@ const useStyles = makeStyles(
         verticalAlign: 'middle',
       },
     },
-    breakTextOverflow: {
-      overflow: 'hidden',
-      wordBreak: 'break-word',
-    },
   }),
   { name: 'CatalogReactEntityDisplayName' },
 );
@@ -81,8 +77,7 @@ export const EntityDisplayName = (
   );
 
   // The innermost "body" content
-  let content = <div className={classes.breakTextOverflow}>{primaryTitle}</div>;
-
+  let content = <>{primaryTitle}</>;
   // Optionally an icon, and wrapper around them both
   content = (
     <Box component="span" className={classes.root}>

plugins/catalog/src/components/AboutCard/AboutContent.tsx

@@ -132,6 +132,7 @@ export function AboutContent(props: AboutContentProps) {
       <AboutField
         label={t('aboutCard.ownerField.label')}
         value={t('aboutCard.ownerField.value')}
+        className={classes.description}
         gridSizes={{ xs: 12, sm: 6, lg: 4 }}
       >
         {ownedByRelations.length > 0 && (

plugins/catalog/src/components/AboutCard/AboutField.tsx

@@ -48,11 +48,12 @@ export interface AboutFieldProps {
   value?: string;
   gridSizes?: Record<string, number>;
   children?: React.ReactNode;
+  className?: string;
 }
 
 /** @public */
 export function AboutField(props: AboutFieldProps) {
-  const { label, value, gridSizes, children } = props;
+  const { label, value, gridSizes, children, className } = props;
   const classes = useStyles();
 
   const childElements = useElementFilter(children, c => c.getElements());
@@ -67,7 +68,7 @@ export function AboutField(props: AboutFieldProps) {
       </Typography>
     );
   return (
-    <Grid item {...gridSizes}>
+    <Grid item {...gridSizes} className={className}>
       <Typography variant="h2" className={classes.label}>
         {label}
       </Typography>