diff --git a/.changeset/unlucky-apricots-call.md b/.changeset/unlucky-apricots-call.md new file mode 100644 index 0000000000..cad43ecf39 --- /dev/null +++ b/.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`. diff --git a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx b/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx index cffed95c7a..1eb2a95ff6 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/ComponentsGrid.tsx +++ b/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 ( - + {componentsWithCounters?.map(c => ( - + diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx index 791ce5ca64..278e2f4b70 100644 --- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx +++ b/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 ( - + {!relationsToggle && ( @@ -118,6 +135,7 @@ export const OwnershipCard = (props: { )}