diff --git a/.changeset/dirty-ducks-suffer.md b/.changeset/dirty-ducks-suffer.md new file mode 100644 index 0000000000..bcfef8550b --- /dev/null +++ b/.changeset/dirty-ducks-suffer.md @@ -0,0 +1,5 @@ +--- +'@backstage/plugin-org': patch +--- + +Fixed overflow bug of name and email on EntitiyMembersListCard component which can occur on specific 'screen width' + ’character length' combinations diff --git a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx index 14f02c189f..7e5b683bf1 100644 --- a/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx +++ b/plugins/org/src/components/Cards/Group/MembersList/MembersListCard.tsx @@ -59,6 +59,17 @@ const useStyles = makeStyles((theme: Theme) => flex: '1', minWidth: '0px', }, + email: { + overflow: 'hidden', + whiteSpace: 'nowrap', + textOverflow: 'ellipsis', + display: 'inline-block', + maxWidth: '100%', + '&:hover': { + overflow: 'visible', + whiteSpace: 'normal', + }, + }, }), ); @@ -88,7 +99,13 @@ const MemberComponent = (props: { member: UserEntity }) => { top: '-2rem', }} /> - + { {profile?.email && ( - {profile.email} + + {profile.email} + )} {description && ( {description}