fix: larger names shrunk in variable tab

[abdul99ahad]

Related to: camunda/camunda-modeler#4505

Proposed Changes

Truncate variable names exceeding max width with ellipses for improved readability

Checklist

To ensure you provided everything we need to look at your PR:

• Brief textual description of the changes present
• Visual demo attached
• Steps to try out present, i.e. using the @bpmn-io/sr tool
• Related issue linked via Closes {LINK_TO_ISSUE} or Related to {LINK_TO_ISSUE}

[nikku]

@misiekhardcore Assigning you for review. Please have a look. 👀

[misiekhardcore]

Can you tell me how to tests that? I have no idea how to run this locally so I can see if it works
I guess I need to use npm run start?

[nikku]

I guess I need to use npm run start?

That is our general practice, it works in well maintained projects.

[misiekhardcore]

So few questions/observations

1. When you changed the display from flex to inline-block, the alignment of the elements broke (it is not centered anymore) also the max-width caused the element does not have the full with of the list
   
2. when the ellipsis kicks in, you are not able anymore to see the full name in any way. I would suggest adding a title prop so when user hovers over the list item, the full label pops up
3. Also kinda related question, shouldn't also some kind of overflow prevention be done to the diagram elements themselves? Cause now when you give an element a long name, it overflows the eleemnt
   
4. maybe a better approach to ellipsis is just preventing the svg element with flex-shrink: 0?

[misiekhardcore]

@nikku I won't argue with that, I just know different approaches, like npm run dev to run project in development and npm run start to run a built version

[nikku]

In our sphere:

• npm run dev spins up our development environment, whatever that is (usually it is a web test runner with the ability to execute individual tests / debug individual test scenarios).
• npm start spins up a demo environment that allows me to test a thing, as E2E as possible, this means it incorporates other components that are needed for reasonable e2e experience.

You can try npm run dev and npm start in this repository, and you'll see what I mean.

[nikku]

If this repository does not live up to our standards, then we want to lift it up 🙂

[abdul99ahad]

So few questions/observations

1. When you changed the display from flex to inline-block, the alignment of the elements broke (it is not centered anymore) also the max-width caused the element does not have the full with of the list
   
2. when the ellipsis kicks in, you are not able anymore to see the full name in any way. I would suggest adding a title prop so when user hovers over the list item, the full label pops up
3. Also kinda related question, shouldn't also some kind of overflow prevention be done to the diagram elements themselves? Cause now when you give an element a long name, it overflows the eleemnt
   
4. maybe a better approach to ellipsis is just preventing the svg element with flex-shrink: 0?

So few questions/observations

1. When you changed the display from flex to inline-block, the alignment of the elements broke (it is not centered anymore) also the max-width caused the element does not have the full with of the list
   
2. when the ellipsis kicks in, you are not able anymore to see the full name in any way. I would suggest adding a title prop so when user hovers over the list item, the full label pops up
3. Also kinda related question, shouldn't also some kind of overflow prevention be done to the diagram elements themselves? Cause now when you give an element a long name, it overflows the eleemnt
   
4. maybe a better approach to ellipsis is just preventing the svg element with flex-shrink: 0?

Thanks for your feedback and suggestions!

1. I've fixed the alignment issue; it turns out we only needed to apply the styles to child elements rather than to all tree nodes, so they now appear centered correctly.
2. Adding a title prop overlay might be redundant here since clicking the variable name takes you directly to the element, where the full name is displayed. Let me know if you feel differently!
3. Great point about overflow prevention on the diagram elements themselves. While it’s outside the current scope, it would be a valuable addition. Feel free to open a new issue for this so we can add it to the backlog.
4. I tried setting flex-shrink: 0 on the SVG, but it didn’t achieve the intended result. If you have ideas for a different approach, I'd be happy to review a PR.

[misiekhardcore]

It is better already cause the element takes the whole space as it should and the ellipsis is there, but the alignment issue remains. You set display: inline-block on the element and at the same time the align-items: center which works only with flex box so it does not work and there is no horizontal alignment between svg and text

I think we need to wrap the text in its separate element to give it the ellipsis so the whole .cds--tree-node__label box can stay flex.
Regarding flex-shrink: 0 I am not sure why setting it on .cds--tree-node__label svg doesn't work for you.

Also, maybe worth looking into as well cause it is related, maybe not, text overflowing issue occurs for process name

And lastly, if you want to have a look together or talk about it feel free to ping me

[abdul99ahad]

It is better already cause the element takes the whole space as it should and the ellipsis is there, but the alignment issue remains. You set display: inline-block on the element and at the same time the align-items: center which works only with flex box so it does not work and there is no horizontal alignment between svg and text

I think we need to wrap the text in its separate element to give it the ellipsis so the whole .cds--tree-node__label box can stay flex. Regarding flex-shrink: 0 I am not sure why setting it on .cds--tree-node__label svg doesn't work for you.

Also, maybe worth looking into as well cause it is related, maybe not, text overflowing issue occurs for process name

And lastly, if you want to have a look together or talk about it feel free to ping me

Thanks for your suggestions. I have incorporated your feedback and alignment issues of svg and text are now resolved. Ready for review.

[misiekhardcore]

This starts to look really good! Just two minor suggestions and we are good