Fix long links in richtext

[carlobeltrame]

Fixes #5446

[github-actions]

⛔ Feature branch deployment currently inactive.

If the PR is still open, you can add the deploy! label to this PR to trigger a feature branch deployment.

[manuelmeister]

I would suggest overflow-wrap: break-word instead. We don't want to break it unless we really have to.

I tried that, didn't suffice to resolve the problem.

[manuelmeister]

Where did you have problems with this solution? Can you post the example?

[carlobeltrame]

Where did you have problems with this solution? Can you post the example?

I'm running locally to test out the effects of your proposal. I won't push this to the feature branch deployment, you will have to test it yourself. How to reproduce:

In frontend/src/components/form/tiptap/TiptapEditor.vue:

div.editor:deep(div.ProseMirror) {
  overflow-wrap: break-word;
}

Displays like this in my Firefox on Linux:

The editor still grows uncontrollably, pushes other elements (e.g. the responsible column in the storyboard) out of the screen.

If I use the text cursor to go to the end of the link, it looks quite broken still, and the broken state even stays when I then nagivate the text cursor to the beginning of the rich text input:

[manuelmeister]

@carlobeltrame I tried to debug this and found some other cases. I think I'd rather go with the standard property overflow-wrap. I've implemented the necessary changes in #5455