diff --git a/.changeset/gold-shirts-yell.md b/.changeset/gold-shirts-yell.md new file mode 100644 index 0000000000..ac03ce3362 --- /dev/null +++ b/.changeset/gold-shirts-yell.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org': patch +--- + +Support member list scrollable when parent has specified height diff --git a/.github/vale/Vocab/Backstage/accept.txt b/.github/vale/Vocab/Backstage/accept.txt index 73f6d56bb4..078a0617c9 100644 --- a/.github/vale/Vocab/Backstage/accept.txt +++ b/.github/vale/Vocab/Backstage/accept.txt @@ -462,3 +462,4 @@ zod Zolotusky zoomable zsh +scrollable \ No newline at end of file diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx index 3716af5522..701feb0b73 100644 --- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx +++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx @@ -119,6 +119,15 @@ const MemberComponent = (props: { member: UserEntity }) => { ); }; +const useListStyles = makeStyles(() => ({ + root: { + height: '100%', + }, + cardContent: { + overflow: 'auto', + }, +})); + /** @public */ export const MembersListCard = (props: { memberDisplayTitle?: string; @@ -130,6 +139,7 @@ export const MembersListCard = (props: { pageSize = 50, showAggregateMembersToggle, } = props; + const classes = useListStyles(); const { entity: groupEntity } = useEntity(); const { @@ -210,13 +220,15 @@ export const MembersListCard = (props: { ); return ( - + {showAggregateMembersToggle && ( <>