From a5da5edd48ebec5e4b79557285f088462b6c7a12 Mon Sep 17 00:00:00 2001
From: Shivam K <292110273+shivoomiess@users.noreply.github.com>
Date: Mon, 22 Jun 2026 15:29:42 +0200
Subject: [PATCH] fix: invite chips overflow out of invites-chips box

---
 .../components/common/UserManagementTable.tsx | 29 ++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/apps/frontend/src/components/common/UserManagementTable.tsx b/apps/frontend/src/components/common/UserManagementTable.tsx
index 154b71ca9c..c5c8e61003 100644
--- a/apps/frontend/src/components/common/UserManagementTable.tsx
+++ b/apps/frontend/src/components/common/UserManagementTable.tsx
@@ -157,10 +157,9 @@ const UserManagementTable = ({
             <Box
               sx={{
                 display: 'flex',
-                flexDirection: 'row',
                 marginTop: 1,
                 gap: 1,
-                alignItems: 'center',
+                alignItems: 'flex-start',
               }}
               data-cy="invites-chips"
             >
@@ -170,21 +169,25 @@ const UserManagementTable = ({
                   color: 'grey',
                   paddingRight: '10px',
                   display: 'inline-block',
+                  whiteSpace: 'nowrap',
+                  mt: '4px',
                 }}
               >
                 Invited:
               </Typography>
-              {invites.map((invite) => (
-                <Chip
-                  sx={{ gap: '2px', padding: '6px' }}
-                  color="secondary"
-                  icon={invite.isEmailSent ? <SendIcon /> : <ScheduleSend />}
-                  size="small"
-                  label={invite.email}
-                  key={invite.email}
-                  onDelete={() => handleDeleteInvite(invite)}
-                />
-              ))}
+              <Box sx={{ display: 'flex', flexWrap: 'wrap', gap: 1, flex: 1 }}>
+                {invites.map((invite) => (
+                  <Chip
+                    sx={{ gap: '2px', padding: '6px' }}
+                    color="secondary"
+                    icon={invite.isEmailSent ? <SendIcon /> : <ScheduleSend />}
+                    size="small"
+                    label={invite.email}
+                    key={invite.email}
+                    onDelete={() => handleDeleteInvite(invite)}
+                  />
+                ))}
+              </Box>
             </Box>
           )}
           <ActionButtonContainer