bug(ui): Fix TextOverflow when there are special characters at the end of the string

[ryan953]

Add <bdi> to better support special characters with ellipsisDirection="left".

Tested in Firefox, Chrome and Safari. Notes below.

	Before	After
Firefox
Chrome
Safari

All Browsers in the 'before' screens would render special characters at the front of the string when ellipsisDirection === 'left' is true:

• Before: you'd see /https://example.com/foo which is not overflowing, but looks funny
• Before: you'd see …/example.com/foo which is missing the trailing slash, it's moved to the front and hidden
• After you'll see https://example.com/foo/ without the overflow
• After you'll see …example.com/foo/ with the trailing slash in it's correct spot.

Safari before wasn't cutting off the start of the string:

• Before you'd see: …https://example.co
• After it's still the same.

To date we're only using ellipsisDirection="left" for two purposes:

• Releases: used for eliding the Package name (two callsites)
• My new "don't call it a breadcrumb" breadcrumb component that truncates urls
  • https://github.com/getsentry/sentry/pull/37038
  • 

In-App examples:

Here's a look at a new area inside sentry.io where we're listing the urls that the user visited, truncating on the left side.

Before this change the trunaction moved those special characters to the left, which makes the urls look funny:

The intention is that if the strings are long they will be truncated on the left side, like this:

[ryan953]

Putting in some real-world examples

Here's how it can look when things are not truncated: the slash should be at the end, not the start of the string

The intention is that if the strings are long they will be truncated on the left side, like this: