feat(editor): Support showing full label in tooltip on hover of dropdown menu items (no-changelog)#28231
Merged
CharlieKolb merged 4 commits intomasterfrom Apr 14, 2026
Merged
Conversation
Bundle ReportChanges will increase total bundle size by 309.95kB (0.68%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: editor-ui-esmAssets Changed:
|
CharlieKolb
commented
Apr 9, 2026
| <slot name="item-label" :item="props" :ui="labelProps"> | ||
| <N8nText | ||
| :class="$style['item-label']" | ||
| :title="showFullLabelOnHover && label.length >= 20 ? label : undefined" |
Contributor
Author
There was a problem hiding this comment.
This is fairly arbitrary, I'm not familiar enough with the component to know if this applies in general, but for my use case I see 19 characters if truncated with overflow.
If there's a css-only solution that would be preferred, please let me know
Contributor
There was a problem hiding this comment.
Not that I know of :/
The simples thing would be to compare scroll and client width, but we can also introduce a library like pretext that seems like an overkill but could come in handy in other places in the project.
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
![cubic-dev-ai[bot]](https://avatars.githubusercontent.com/in/1082092?s=60&v=4){kind=small}
Contributor
There was a problem hiding this comment.
1 issue found across 5 files
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="packages/frontend/@n8n/design-system/src/v2/components/DropdownMenu/DropdownMenuItem.test.ts">
<violation number="1" location="packages/frontend/@n8n/design-system/src/v2/components/DropdownMenu/DropdownMenuItem.test.ts:124">
P3: The test name says “on hover,” but the test never triggers a hover. Either add a hover interaction or rename the test to match what it actually asserts.
(Based on your team's feedback about matching test titles to asserted scenarios.) [FEEDBACK_USED]</violation>
</file>
Architecture diagram
sequenceDiagram
participant User
participant Menu as DropdownMenu
participant Item as DropdownMenuItem
participant Label as N8nText
participant Browser
Note over Menu, Item: Configuration Flow
User->>Menu: Renders dropdown
Menu->>Menu: Evaluate showFullLabelOnHover (Prop)
loop for each item
Menu->>Item: NEW: Pass showFullLabelOnHover prop
Note over Item: Logic: (item.prop ?? menu.prop)
alt NEW: showFullLabelOnHover is true AND label.length >= 20
Item->>Label: CHANGED: Set title attribute to full label text
else
Item->>Label: title attribute is undefined
end
opt Item has children (Submenu)
Item->>Item: NEW: Recursively pass prop to child N8nDropdownMenuItem
end
end
Note over User, Browser: Interaction Flow
User->>Browser: Hover mouse over truncated label
Browser->>Browser: Detect title attribute on N8nText element
Browser-->>User: Display native system tooltip with full label text
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review, or fix all with cubic.
Contributor
Performance ComparisonComparing current → latest master → 14-day baseline Idle baseline with Instance AI module loaded
docker-stats
Memory consumption baseline with starter plan resources
How to read this table
|
…nMenu/DropdownMenuItem.test.ts Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Contributor
MiloradFilipovic
left a comment
MiloradFilipovic
left a comment
There was a problem hiding this comment.
Works nicely, I left a few comments so take a look what makes sense
| <slot name="item-label" :item="props" :ui="labelProps"> | ||
| <N8nText | ||
| :class="$style['item-label']" | ||
| :title="showFullLabelOnHover && label.length >= 20 ? label : undefined" |
Contributor
There was a problem hiding this comment.
Not that I know of :/
The simples thing would be to compare scroll and client width, but we can also introduce a library like pretext that seems like an overkill but could come in handy in other places in the project.
| <slot name="item-label" :item="props" :ui="labelProps"> | ||
| <N8nText | ||
| :class="$style['item-label']" | ||
| :title="showFullLabelOnHover && label.length >= 20 ? label : undefined" |
Contributor
There was a problem hiding this comment.
Nit: Any reason for using title over N8nToolTip?
Contributor
Author
There was a problem hiding this comment.
Just cause I kept it optional - will try that 👌
Contributor
Author
There was a problem hiding this comment.
I'm tempted to stick with the title on the text here 😅 Moving this risks breaking a use case which hardcodes a css override also technically, so I'd rather not touch it anyway
Contributor
There was a problem hiding this comment.
Alright, makes sense, it was a nit after all. I just see we are mixing those a bit all over the place but we should consult the design team for some guidelines. Good to go for this one
Contributor
There was a problem hiding this comment.
1 issue found across 4 files (changes from recent commits).
Prompt for AI agents (unresolved issues)
Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.
<file name="packages/frontend/@n8n/design-system/src/v2/components/DropdownMenu/DropdownMenuItem.vue">
<violation number="1" location="packages/frontend/@n8n/design-system/src/v2/components/DropdownMenu/DropdownMenuItem.vue:122">
P2: The new `titleAttr` dropped the `showFullLabelOnHover` guard, so long-label tooltips are now enabled globally instead of only when opted in.</violation>
</file>
Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review, or fix all with cubic.
Aijeyomah
pushed a commit
to Aijeyomah/n8n
that referenced
this pull request
Apr 15, 2026
…own menu items (no-changelog) (n8n-io#28231) Co-authored-by: cubic-dev-ai[bot] <191113872+cubic-dev-ai[bot]@users.noreply.github.com>
Contributor
|
Got released with |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
Support showing a tooltip on very long names on dropdowns. Opt in currently to avoid changing existing behavior, also open to enabling this by default if preferred.
Related Linear tickets, Github issues, and Community forum posts
https://linear.app/n8n/issue/ADO-5043/improve-dropdown-menu-to-support-full-label-tooltip-on-hover
Review / Merge checklist
Backport to Beta,Backport to Stable, orBackport to v1(if the PR is an urgent fix that needs to be backported)