diff --git a/.changeset/fix-org-profile-card-overflow.md b/.changeset/fix-org-profile-card-overflow.md
new file mode 100644
index 0000000000..21ec67b428
--- /dev/null
+++ b/.changeset/fix-org-profile-card-overflow.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-org': patch
+---
+
+Fixed `GroupProfileCard` and `UserProfileCard` content overflowing on narrow screens.
diff --git a/plugins/org/report.api.md b/plugins/org/report.api.md
index 2fa5e7a285..58b3b8fc2c 100644
--- a/plugins/org/report.api.md
+++ b/plugins/org/report.api.md
@@ -138,5 +138,6 @@ export const UserProfileCard: (props: {
export type UserProfileCardClassKey =
| 'closeButton'
| 'moreButton'
- | 'dialogPaper';
+ | 'dialogPaper'
+ | 'list';
```
diff --git a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx b/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
index 5810a0447d..97a6c94ef0 100644
--- a/plugins/org/src/components/Cards/Group/GroupProfile/GroupProfileCard.tsx
+++ b/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',
},
}));
diff --git a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx b/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
index e34adde670..cbdfed6f14 100644
--- a/plugins/org/src/components/Cards/User/UserProfileCard/UserProfileCard.tsx
+++ b/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 && {description}}
-
+
{profile?.email && (