diff --git a/.changeset/wild-ravens-laugh.md b/.changeset/wild-ravens-laugh.md
new file mode 100644
index 0000000000..88e7d18646
--- /dev/null
+++ b/.changeset/wild-ravens-laugh.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Added support for scrolling to OwnershipCard component
diff --git a/plugins/org/report.api.md b/plugins/org/report.api.md
index 7d58d96263..13143d0e4c 100644
--- a/plugins/org/report.api.md
+++ b/plugins/org/report.api.md
@@ -40,6 +40,7 @@ export const EntityOwnershipCard: (props: {
relationsType?: EntityRelationAggregation;
relationAggregation?: EntityRelationAggregation;
entityLimit?: number;
+ maxScrollHeight?: string;
}) => JSX_2.Element;
// @public (undocumented)
@@ -101,6 +102,7 @@ export const OwnershipCard: (props: {
relationsType?: EntityRelationAggregation;
relationAggregation?: EntityRelationAggregation;
entityLimit?: number;
+ maxScrollHeight?: string;
}) => JSX_2.Element;
// @public (undocumented)
diff --git a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
index cf34800bf4..1df55c62c2 100644
--- a/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
+++ b/plugins/org/src/components/Cards/OwnershipCard/OwnershipCard.tsx
@@ -28,6 +28,7 @@ import { ComponentsGrid } from './ComponentsGrid';
import { EntityRelationAggregation } from '../types';
import { useTranslationRef } from '@backstage/frontend-plugin-api';
import { orgTranslationRef } from '../../../translation';
+import Box from '@material-ui/core/Box';
/** @public */
export type OwnershipCardClassKey =
@@ -73,6 +74,11 @@ const useStyles = makeStyles(
overflowY: 'auto',
marginTop: 0,
},
+ box: {
+ overflowY: 'auto',
+ padding: theme.spacing(0, 1, 1),
+ margin: theme.spacing(0, -1),
+ },
}),
{
name: 'PluginOrgOwnershipCard',
@@ -88,16 +94,20 @@ export const OwnershipCard = (props: {
relationsType?: EntityRelationAggregation;
relationAggregation?: EntityRelationAggregation;
entityLimit?: number;
+ maxScrollHeight?: string;
}) => {
const {
variant,
entityFilterKind,
hideRelationsToggle,
entityLimit = 6,
+ maxScrollHeight: propMaxScrollHeight,
} = props;
const relationAggregation = props.relationAggregation ?? props.relationsType;
const relationsToggle =
hideRelationsToggle === undefined ? false : hideRelationsToggle;
+ const maxScrollHeight =
+ variant !== 'fullHeight' ? propMaxScrollHeight : undefined;
const classes = useStyles();
const { entity } = useEntity();
const { t } = useTranslationRef(orgTranslationRef);
@@ -165,13 +175,15 @@ export const OwnershipCard = (props: {
)}
-
+
+
+
);
};