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..ccb3f1b705 100644 --- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx +++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx @@ -61,6 +61,13 @@ const useStyles = makeStyles((theme: Theme) => flex: '1', minWidth: '0px', }, + cardGrid: { + display: 'grid', + gap: theme.spacing(1.5), + gridTemplateColumns: `repeat(auto-fit, minmax(auto, ${theme.spacing( + 34, + )}px))`, + }, }), ); @@ -73,49 +80,47 @@ const MemberComponent = (props: { member: UserEntity }) => { const displayName = profile?.displayName ?? metaName; return ( - - + + + - - - - - - {profile?.email && ( - - - - )} - {description && ( - {description} - )} - + + + + {profile?.email && ( + + + + )} + {description && ( + {description} + )} - + ); }; @@ -134,6 +139,7 @@ export const MembersListCard = (props: { pageSize?: number; showAggregateMembersToggle?: boolean; }) => { + const classes = useStyles(); const { memberDisplayTitle = 'Members', pageSize = 50, @@ -219,6 +225,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 )}