[Fix] - Trim Names in Settings > Members table #7509

[Karankhatik]

Issue: Long names in the Members table were overflowing, affecting the layout.

Fix:

• Trimmed long names with ellipses.
• Added tooltips to display the full content on hover.
• Max-width of the text dynamically set to 90px on large screens, and 60px on mobile.
  

[greptile-apps]

PR Summary

This PR implements text trimming for long names in the Settings > Members table, improving layout and readability.

• Added StyledScrollableTextContainer with max-width and ellipsis for name display
• Implemented AppTooltip to show full names on hover
• Adjusted StyledTableCell for better mobile responsiveness
• Modified TableRow rendering to include new styling and tooltip functionality
• Updated imports to include necessary components from 'twenty-ui'

_{1 file(s) reviewed, no comment(s)
Edit PR Review Bot Settings}

[Bonapara]

Current:

It looks like there is an undesired right padding. The gap between the name and the email should be only 16px

Desired:

[charlesBochet]

Hi @Karankhatik, thanks for the PR
The code looks good, waiting on @Bonapara feedbacks to be taken into account

[Karankhatik]

Hello @charlesBochet what should I do, should I work on @Bonapara feedback or code is fine. Please confirm.

[charlesBochet]

Hello @charlesBochet what should I do, should I work on @Bonapara feedback or code is fine. Please confirm.

Work on @Bonapara feedbacks :)

[Karankhatik]

@Bonapara I've successfully removed the undesired space; however, there's an issue where, if the name is shorter then the (ellipsis length), the email gets too close to the name, which affects the layout. Please provide your suggestions.

[Bonapara]

@Karankhatik The issue isn't the spacing between the fields, which should remain the same. It's the name field that isn't using its full available width.

The spacing between the fields should remain 16px

[charlesBochet]

You also have conflicts now :)

[Karankhatik]

@Bonapara, you mean the text should take up the entire width of the container, and only when it exceeds the container's width, we apply an ellipsis? Also, the space between the name and email will be 16px. Is that correct?

[Bonapara]

Absolutely!

[Karankhatik]

Thanks will update u.

[charlesBochet]

all these cases look too heavy, I'm taking a look

[charlesBochet]

Mobile:

[charlesBochet]

Desktop:

[charlesBochet]

I've reworked a bit to simplify CSS