Overflowing long prefix and suffix values in the form fields

[GeethaParthasarathy]

Describe the bug

When we add a long prefix and suffix values to any form element we could see it overflowing from the sides

Steps to reproduce

1. Create a new form
2. Add any form element say Text field
3. Add quite a long text for prefix and suffix
4. We could see that the text is overflowing from the sides of the field

Expected behavior

We could either make use of ellipsis here or restrict the number of characters for prefix/suffix

Environment

• OS: [ Windows 10]
• Camunda Modeler Version: [5.7.0 rc-1]
• Execution Platform: [Camunda Cloud]

Additional context

No response

[Skaiir]

For now as a fix to this we have decided to simply truncate the text as we consider most scenarios of overflow as a misuse of the adorners in the first place, the PR for this is here.

As alternatives, we have considered restricting the width of the adorners and also restricting the length of the adorner text but since this is a problem that is very dependent on the viewport, we decided to leave users the freedom to write text that doesn't fit, as it is an edge case. In any case we'll truncate to keep it visually sensible, especially in the editor which has a pretty narrow viewport in preview mode.

[Skaiir]

Slack conversation around this

[pinussilvestrus]

Fixed upstream via bpmn-io/form-js#489

[nikku]

Fixed via #3422.

As a user I'd expect the text to be cut off via ... instead of turning into multi-line. That could be a potential future improvement.

CC @pinussilvestrus @Skaiir

[Skaiir]

@nikku As the guy who thought he provided this exact fix me too .

Is it turning into multi-line in the modeler integration then?

[nikku]

Not sure. Just reporting from a users standpoint. 🙈

[Skaiir]

Ah I see what's wrong, good find, some CSS changes clashed. Initially, it was behaving as you described.