Larger element names reduces the icon size in variables tab

[GeethaParthasarathy]

Describe the bug

When we have larger text names the icon of the actvitiy/event gets shrunk in the variables tab

Steps to reproduce

1. Create a activity/event with a larger name that has input/output variables
2. Open the variables tab
3. We could see that the icon size of the respective element is shrunk with the length of the name

Screen.Recording.2024-09-06.at.11.21.36.mov

Expected behavior

Larger element names could be cut short by adding ellipsis

Environment

• OS: [MacOS 10.2]
• Camunda Modeler Version: [5.27.0]
• Execution Platform: [Camunda 8]

Additional context

No response

[nikku]

This needs a fix in the variable outline project.

[misiekhardcore]

Is ellipsis the right approach here?
If so shouldn't we display the full name on hover (with title prop for example?
Or should we simply block shrinking the icon element?

[misiekhardcore]

Also I can see another problem, when the name is really long, it not only overflows the element list, but also it does not fit in the element on the diagram. Is this something what should also be addressed?

[abdul99ahad]

Is ellipsis the right approach here? If so shouldn't we display the full name on hover (with title prop for example? Or should we simply block shrinking the icon element?

We are also doing the same in Problems tab and it doesn't display full element name on hover so imo, the variable tab should behave the same.

[abdul99ahad]

Also I can see another problem, when the name is really long, it not only overflows the element list, but also it does not fit in the element on the diagram. Is this something what should also be addressed?

As mentioned in the PR, this is out of scope for variable outline. This needs fix in diagram-js. Feel free to open the issue.

[nikku]

@abdul99ahad Let's go forth and integrate the upstream fix, closing this issue.