use word-wrap and add line break controls

[patricklx]

sorry for pr again...
found this issue when a small component is at the right side

[patricklx]

found this https://www.fileformat.info/info/unicode/char/200b/index.htm
with this we can control where line breaks are in addition allowed. I added them around the / character

[RobbieTheWagner]

@patricklx it feels like we're playing whack-a-mole with this issue. I don't think we should be specifying which characters we wrap on. We need to set a max-width on the container for this text and just have it auto wrap.

[patricklx]

with word-wrap: break-word; it only breaks the word when max-width is reached. before it was breaking even sooner. causing issues.
specifying the character is just a nice plus point. otherwise it will auto-wrap anywhere in the word. But if it finds a better spot to break on it uses that instead. Since we always have some / chars in the path, we can use that. (by default it will not break on them, it only breaks on spaces and -, maybe others as well).
if there is no /, it will also just use default behaviour and break the word anywhere

[RobbieTheWagner]

with word-wrap: break-word; it only breaks the word when max-width is reached. before it was breaking even sooner. causing issues. specifying the character is just a nice plus point. otherwise it will auto-wrap anywhere in the word. But if it finds a better spot to break on it uses that instead. Since we always have some / chars in the path, we can use that. (by default it will not break on them, it only breaks on spaces and -, maybe others as well). if there is no /, it will also just use default behaviour and break the word anywhere

I'm not sure I fully understand. Perhaps we need a min-width as well to make sure it doesn't get so small? I would prefer not to manually specify where it breaks, but rely on default behavior.

[patricklx]

it works well with word-wrap: break-word without specifying min-width.
default behaviour just looks ugly, when it breaks the word anywhere, because it cannot find a good point to break the word.

[patricklx]

this on ember website with small window:

with specifying breaking points:

and without: