fix: text overlaping the resourse sharing

Author: arianber7

src/inputs/RoleEditor/RoleEditor.js

@@ -2,7 +2,7 @@
 // Licensed under the MIT license.
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid2 as Grid, Typography, Avatar } from '@mui/material';
+import { Grid2 as Grid, Typography, Avatar, Tooltip } from '@mui/material';
 import makeStyles from '@mui/styles/makeStyles';
 import { DefaultAvatar } from '../../misc';
 import { getIdentifierFromUserEmail } from '../../utils';
@@ -15,6 +15,11 @@ const useStyles = makeStyles((theme) => ({
     gap: '15px',
     marginLeft: 0,
   },
+  agentName: {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    textWrap: 'nowrap ',
+  },
   rolesEditor: {
     display: 'flex',
     alignItems: 'center',
@@ -23,6 +28,7 @@ const useStyles = makeStyles((theme) => ({
   nameGroup: {
     display: 'flex',
     flexDirection: 'column',
+    maxWidth: '80%',
   },
 }));
 export const RoleEditor = ({
@@ -42,9 +48,11 @@ export const RoleEditor = ({
       <Grid className={classes.agentGroup} size={7}>
         {avatar}
         <div className={classes.nameGroup}>
-          <Typography data-cy="role-editor-agent-name" variant="body1">
-            {agentName}
-          </Typography>
+          <Tooltip title={agentName} arrow>
+            <Typography className={classes.agentName} data-cy="role-editor-agent-name" variant="body1">
+              {agentName}
+            </Typography>
+          </Tooltip>
           {helperText != null && (
             <Typography data-cy="role-editor-helper-text" variant="body2" color="textSecondary">
               {helperText[agentAccess]}
@@ -102,4 +110,4 @@ RoleEditor.propTypes = {
    *  List of detailed description of each role to display when changing access
    */
   helperText: PropTypes.object,
-};
+};