Implement text ellipsis on dropdowns

[Frizi]

Pull Request Description

Fixes #10091

dropdown-layout.mp4

Important Notes

Checklist

Please ensure that the following checklist has been satisfied before submitting the PR:

• The documentation has been updated, if necessary.
• Screenshots/screencasts have been attached, if there are any visual changes. For interactive or animated visual changes, a screencast is preferred.
• All code follows the
  Scala,
  Java,
  TypeScript,
  and
  Rust
  style guides. In case you are using a language not listed above, follow the Rust style guide.
• Unit tests have been written where possible.

[kazcw]

How does r-24 work? I don't see any definition.

[Frizi]

It interacts with the port widgets, avoiding adding extra margins around already rounded elements. That allows the icon's port to be rendered as a circle.

[farmaazon]

This line confuses me. If this is the minimum width of drop down, why do we subtract overflowing from port width? The more the drop-down overflow, the less minimum width is there? Or I misread something?

[Frizi]

The more the "port width" overflows the screen borders, the less minimum width we want to enforce for dropdown. That way the dropdown will not needlessly stay large when it doesn't have to while the port is partially out of screen.

[farmaazon]

Ok. So the important information missing for me is: overflow is actually "screen-overflow", I thought it's rather "port width overflow" (availableWidth is quite vague - I understood it as "availableWith in reference element"). You may adjust names a bit to make it clearer

[Frizi]

The availableWidth is unfortunately a property name defined by floating UI library. It looks like it is vague on purpose, since its actual meaning depends on many options. I'll just rename the local variable.