diff --git a/.changeset/fresh-seahorses-glow.md b/.changeset/fresh-seahorses-glow.md new file mode 100644 index 0000000000..ff42181c5d --- /dev/null +++ b/.changeset/fresh-seahorses-glow.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org': patch +--- + +Fix issue where members inside of `` would be rendered as squished when the card itself was shrunk down. diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx index 701feb0b73..8967e7cdd7 100644 --- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx +++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx @@ -73,59 +73,64 @@ const MemberComponent = (props: { member: UserEntity }) => { const displayName = profile?.displayName ?? metaName; return ( - - + + + - - - - - - {profile?.email && ( - - - - )} - {description && ( - {description} - )} - + + + + {profile?.email && ( + + + + )} + {description && ( + {description} + )} - + ); }; -const useListStyles = makeStyles(() => ({ +const useListStyles = makeStyles(theme => ({ root: { height: '100%', }, cardContent: { overflow: 'auto', }, + memberList: { + display: 'grid', + gap: theme.spacing(1.5), + gridTemplateColumns: `repeat(auto-fit, minmax(auto, ${theme.spacing( + 34, + )}px))`, + }, })); /** @public */ @@ -219,6 +224,25 @@ export const MembersListCard = (props: { /> ); + let memberList: React.JSX.Element; + if (members && members.length > 0) { + memberList = ( + + {members.slice(pageSize * (page - 1), pageSize * page).map(member => ( + + ))} + + ); + } else { + memberList = ( + + + This group has no {memberDisplayTitle.toLocaleLowerCase()}. + + + ); + } + return ( ) : ( - - {members && members.length > 0 ? ( - members - .slice(pageSize * (page - 1), pageSize * page) - .map(member => ( - - )) - ) : ( - - - This group has no {memberDisplayTitle.toLocaleLowerCase()}. - - - )} - + memberList )}