Merge pull request #23345 from JounQin/fix/ui_ownership

fix: `OwnershipCard` could be unscrollable when using together with `react-grid-layout`

.changeset/unlucky-apricots-call.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Fixed an issue where the `OwnershipCard` component failed to scroll properly when used alongside `react-grid-layout`.

plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx

@@ -107,11 +107,13 @@ const EntityCountTile = ({
 };
 
 export const ComponentsGrid = ({
+  className,
   entity,
   relationsType,
   entityFilterKind,
   entityLimit = 6,
 }: {
+  className?: string;
   entity: Entity;
   relationsType: EntityRelationAggregation;
   entityFilterKind?: string[];
@@ -132,7 +134,7 @@ export const ComponentsGrid = ({
   }
 
   return (
-    <Grid container>
+    <Grid container className={className}>
       {componentsWithCounters?.map(c => (
         <Grid item xs={6} md={6} lg={4} key={c.type ?? c.kind}>
           <EntityCountTile

plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.stories.tsx

@@ -98,7 +98,12 @@ export const Default = () =>
     <ApiProvider apis={apis}>
       <EntityProvider entity={defaultEntity}>
         <Grid container spacing={4}>
-          <Grid item xs={12} md={6}>
+          <Grid
+            item
+            xs={12}
+            md={6}
+            style={{ maxHeight: 320, overflow: 'hidden' }}
+          >
             <OwnershipCard />
           </Grid>
         </Grid>

plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx

@@ -30,6 +30,14 @@ import { ComponentsGrid } from './ComponentsGrid';
 import { EntityRelationAggregation } from './types';
 
 const useStyles = makeStyles(theme => ({
+  card: {
+    maxHeight: '100%',
+  },
+  cardContent: {
+    display: 'flex',
+    flexDirection: 'column',
+    overflow: 'hidden',
+  },
   list: {
     [theme.breakpoints.down('xs')]: {
       padding: `0 0 12px`,
@@ -50,6 +58,10 @@ const useStyles = makeStyles(theme => ({
       transform: 'unset',
     },
   },
+  grid: {
+    overflowY: 'auto',
+    marginTop: 0,
+  },
 }));
 
 /** @public */
@@ -84,7 +96,12 @@ export const OwnershipCard = (props: {
   }, [setRelationsType, defaultRelationsType, relationsType]);
 
   return (
-    <InfoCard title="Ownership" variant={variant}>
+    <InfoCard
+      title="Ownership"
+      variant={variant}
+      className={classes.card}
+      cardClassName={classes.cardContent}
+    >
       {!relationsToggle && (
         <List dense>
           <ListItem className={classes.list}>
@@ -118,6 +135,7 @@ export const OwnershipCard = (props: {
         </List>
       )}
       <ComponentsGrid
+        className={classes.grid}
         entity={entity}
         entityLimit={entityLimit}
         relationsType={getRelationsType}