From 87eb31c14148575ef3a8d07bc1651e685bdd9122 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Wed, 25 Mar 2026 11:43:31 +0100
Subject: [PATCH] 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               | 5 +++++
 plugins/org/report.api.md                                 | 3 ++-
 .../Cards/Group/GroupProfile/GroupProfileCard.tsx         | 1 +
 .../Cards/User/UserProfileCard/UserProfileCard.tsx        | 8 ++++++--
 4 files changed, 14 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/fix-org-profile-card-overflow.md

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 && <Text color="secondary">{description}</Text>}
       <Box p="2">
-        <List>
+        <List className={classes.list}>
           {profile?.email && (
             <ListItem>
               <ListItemIcon>