fix(org): prevent profile card content overflow on narrow screens

Signed-off-by: Johan Persson <johanopersson@gmail.com>

.changeset/fix-org-profile-card-overflow.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Fixed `GroupProfileCard` and `UserProfileCard` content overflowing on narrow screens.

plugins/org/report.api.md

@@ -138,5 +138,6 @@ export const UserProfileCard: (props: {
 export type UserProfileCardClassKey =
   | 'closeButton'
   | 'moreButton'
-  | 'dialogPaper';
+  | 'dialogPaper'
+  | 'list';
 ```

plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx

@@ -64,6 +64,7 @@ const useStyles = makeStyles(theme => ({
   list: {
     padding: 0,
     marginLeft: theme.spacing(0.5),
+    overflowWrap: 'anywhere',
   },
 }));
 

plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx

@@ -56,7 +56,8 @@ import { orgTranslationRef } from '../../../../translation';
 export type UserProfileCardClassKey =
   | 'closeButton'
   | 'moreButton'
-  | 'dialogPaper';
+  | 'dialogPaper'
+  | 'list';
 
 const useStyles = makeStyles(
   theme =>
@@ -74,6 +75,9 @@ const useStyles = makeStyles(
       dialogPaper: {
         minHeight: 400,
       },
+      list: {
+        overflowWrap: 'anywhere',
+      },
     }),
   { name: 'PluginOrgUserProfileCard' },
 );
@@ -149,7 +153,7 @@ export const UserProfileCard = (props: {
     >
       {description && <Text color="secondary">{description}</Text>}
       <Box p="2">
-        <List>
+        <List className={classes.list}>
           {profile?.email && (
             <ListItem>
               <ListItemIcon>