Merge pull request #27442 from its-mitesh-kumar/catalog-react-owner-text-overflow

Catalog react owner text overflow

.changeset/healthy-planets-confess.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-catalog-react': patch
+---
+
+Fixed bug in `EntityDisplayName` where text was overflowing.

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

@@ -79,7 +79,6 @@ export const EntityDisplayName = (
 
   // The innermost "body" content
   let content = <>{primaryTitle}</>;
-
   // Optionally an icon, and wrapper around them both
   content = (
     <Box component="span" className={classes.root}>

plugins/catalog/report.api.md

@@ -64,6 +64,8 @@ export interface AboutFieldProps {
   // (undocumented)
   children?: React_2.ReactNode;
   // (undocumented)
+  className?: string;
+  // (undocumented)
   gridSizes?: Record<string, number>;
   // (undocumented)
   label: string;

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>