-
Notifications
You must be signed in to change notification settings - Fork 1.6k
Fix text overlapping in Users table columns #25116
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
base: main
Are you sure you want to change the base?
Conversation
- Add Typography component to imports - Set width property (200px) for Username and Name columns - Add ellipsis config with showTitle: false at column level - Use Typography.Text with ellipsis tooltip for Name column - Keep UserPopOverCard with showUserName for Username column - Wrap fallback getEntityName with Typography.Text for ellipsis Co-authored-by: karanh37 <33024356+karanh37@users.noreply.github.com>
| width: 200, | ||
| ellipsis: { showTitle: false }, | ||
| render: (_, record) => | ||
| record.name ? ( | ||
| <UserPopOverCard | ||
| showUserName | ||
| profileWidth={16} | ||
| userName={record.name} | ||
| /> | ||
| ) : ( | ||
| <Typography.Text ellipsis={{ tooltip: true }}> | ||
| {getEntityName(record)} | ||
| </Typography.Text> | ||
| ), |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you fix this to userCellRenderer instead adding custom rendering here?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed in commit 16e6000 - now using the existing userCellRenderer function instead of duplicating the logic inline.
| render: (_, record) => ( | ||
| <Typography.Text ellipsis={{ tooltip: true }}> | ||
| {getEntityName(record)} | ||
| </Typography.Text> |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Adding ellipsis to column options should be good. no need to double the ellipsis in the render too
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Fixed in commit 16e6000 - removed the Typography.Text wrapper. The column-level ellipsis configuration is now sufficient for text truncation with tooltip.
|
@copilot address comments |
…llipsis - Use existing userCellRenderer function for Username column instead of duplicating logic - Remove Typography.Text wrapper from Name column (column-level ellipsis is sufficient) - Remove unused Typography import Co-authored-by: chirag-madlani <12962843+chirag-madlani@users.noreply.github.com>
Code Review ✅ ApprovedClean, minimal bug fix that adds proper text truncation to prevent column overlapping in the Users table. The implementation follows existing patterns in the codebase. OptionsAuto-apply is off Gitar will not commit updates to this branch. Comment with these commands to change:
Was this helpful? React with 👍 / 👎 | This comment will update automatically (Docs) |
Describe your changes:
Long usernames and display names in the Users table were overlapping into adjacent columns without truncation or tooltips, as shown below where "boldd8a78d20.hawkaf61caf3.176" runs into "Boldd8a78d20Hawkaf61caf3":
Changes:
width: 200andellipsis: { showTitle: false }to Username and Name columns incommonUserDetailColumns()userCellRendererfunction (with UserPopOverCard)getEntityName(record)directlyThis centralized fix applies to all user tables: Settings → Users/Admins, Online Users, and Team User tabs.
Implementation:
The column-level
ellipsisconfiguration enables Ant Design Table's built-in text truncation with automatic tooltip on hover, following the pattern fromEntityLineageUtils.tsx.Type of change:
Checklist:
Fixes <issue-number>: <short explanation>Original prompt
💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.