UI: fix #41308

[klees]

Dear colleagues,

this fixes #41308 (I hope...).

The goal is to have a breadcrumb where an ellipsis (that three dots...) is shown on the left side once space for the complete path is too long. General idea is to use RTL text direction with according CSS to achieve that goal. This mostly works fine, but sometimes it breaks when certain symbols are involved.

This shall improve the situation by changing the implemenation a bit:

• The complete breadcrumb is marked as RTL in the DOM to create that "ellipsis on the left" effect.
• The individual parts of the breadcrumb are marked LTR in the DOM to make the browser understand that it shall not do funny stuff with these parts.
• The parts are separated via the rather ancient but somehow obscure "unit separator" symbol: https://www.compart.com/en/unicode/U+241F. For one, this symbol makes the browser render the parts of the breadcrumb in the expected direction. This would have been achieved by many other chars, e.g. a simple "f", but not by whitespace chars. On the other hand, given the meaning of the symbol, its seems to be semantically sound to use it. There are in fact units that are separated by this symbol...
• The symbol then is hidden via CSS (it looks funny and wrong...) and the previous mechanism to use :after and content in the CSS is used to reinsert the > as a separator.

As a side effect, the DOM now contains the breadcrumbs from more specific to less specific (giving e.g. the "Repository" last), which from my POV is good for e.g. screen readers as the most relevant information ("Where am I exactly?") comes before the information that is not very informativ ("I'm in the Repository indeed...").

Intersting stuff, hope you enjoy this just like I did.

Kind regards!