Gitpulse
Merged
Size
S
Change Breakdown
Bug Fix90%
Style10%
#28191fix: Truncate long custom role names and add hover tooltip

Role names now truncate with hover tooltip

BG
BGZStephen
·Apr 8, 2026

Custom role names that exceed the available space now truncate with an ellipsis and display the full name in a tooltip on hover. The role settings page heading and action buttons no longer wrap unexpectedly when names are long.

Role names in n8n's project settings could get lengthy, and when they did, the UI broke. On the role settings page, long role names in the heading would expand unboundedly and push the save and discard buttons onto a new row. In the project members role selector, names were truncated but users had no way to see what the full name was.

Two files were updated to resolve this. On the role settings page, the heading container now allows its child to shrink using min-width: 0, and the role name truncates with an ellipsis. A tooltip wraps the name so the complete text appears on hover. The role selector receives the same treatment—truncated names now show the full text when users hover over the trigger, though the tooltip disappears while the dropdown is open to avoid redundant information.

Users with short role names won't notice any change. Those with custom roles named things like "Super Long Custom Role Name That Definitely Overflows" will see clean, aligned buttons and accessible labels.

View Original GitHub Description

Summary

Fixes layout and UX issues in the role selector and role settings page when custom roles have long display names.

Role settings page (save/discard buttons wrapping)

The heading Role "…" had no width constraint in the flex row, so a long role name would grow unboundedly and push the save/discard buttons onto a new line.

  • Added min-width: 0 to the heading container (flex child) so the heading can shrink
  • Applied overflow: hidden; text-overflow: ellipsis; white-space: nowrap to the heading element so long names truncate with …
  • Wrapped the role name part of the heading in N8nTooltip so the full name is always visible on hover

Role selector (project member role cell)

The trigger already had CSS truncation but no way to see the full name once it was cut off.

  • Added N8nTooltip to the selector trigger — shows the full role name on hover/focus, disabled while the dropdown is open
<img width="1850" height="931" alt="image" src="https://github.com/user-attachments/assets/748bfaa7-9d88-4d6a-a63c-4410c97d59b2" /> <img width="1850" height="931" alt="image" src="https://github.com/user-attachments/assets/65ed166d-52cb-44ae-a0dc-f5b0bc663784" />

Related Linear tickets

https://linear.app/n8n/issue/IAM-19

Manual testing

Prerequisites

Create a custom role with a long name, e.g. "Super Long Custom Role Name That Definitely Overflows" (Settings → Project Roles → New Role).

1. Role settings page — heading truncation & button alignment

  1. Navigate to Settings → Project Roles and open the long-named role.
  2. Verify: The heading Role "Super Long Custom Role Name…" truncates with … — it does not wrap onto multiple lines.
  3. Verify: The Discard changes and Save buttons remain on the same line as the heading, right-aligned, without wrapping.
  4. Hover over the truncated heading text.
  5. Verify: A tooltip appears showing the full role name.

2. Role selector — truncation & tooltip

  1. Open a project → go to Project settings → Members.
  2. Click the role dropdown for any member.
  3. Select the long-named custom role.
  4. Verify: The trigger (closed dropdown) shows the role name truncated on a single line with … — it does not wrap or overflow.
  5. Verify: The role name is left-aligned within the trigger.
  6. Hover over the trigger (without opening the dropdown).
  7. Verify: A tooltip appears showing the full role name.
  8. Open the dropdown again.
  9. Verify: No tooltip appears while the dropdown is open.

3. Short role names (regression)

  1. Assign a short built-in role (e.g. Editor) via the role selector.
  2. Verify: The trigger shows the name without truncation or visual issues.
  3. Open the long-named role in settings.
  4. Verify: Discard/Save buttons are still present and functional (save is disabled until a change is made).

Review / Merge checklist

  • PR title and summary are descriptive. (conventions)
  • Docs updated or follow-up ticket created.
  • Tests included.
  • PR Labeled with Backport to Beta, Backport to Stable, or Backport to v1 (if the PR is an urgent fix that needs to be backported)
© 2026 · via Gitpulse