Tile name overlaps with more options icon

[jeanugroho-Bentley]

Describe the bug (current behavior)

When the tile name is too long, it overlaps with the more options icon

Expected Behavior

The tile name shouldn't overlap with the more options icon

Link to minimal repro

https://stackblitz.com/edit/github-zvoxjsmy?file=src%2FApp.tsx

Steps To Reproduce

Just open the forked repo. The UI from the code should look like the following:

Package Version

• I'm using the latest version of iTwinUI.

Anything else?

No response

[r100-stack]

Thanks for the issue. We have been discussing a clean way to address this but think we need a bit more context to proceed.

Could you please elaborate a bit more on your use case? Also, what do you show in the tile name and how long do those texts usually get? Also, would you prefer text wrapping (excess text goes on to the next line) or truncation (all text on a single line with ellipses)?

Also, just to mention, we noticed a slight different between using Tile.Name + the name prop vs. Tile.Name + Tile.NameLabel (composition API docs). The difference is that the former causes text to wrap where the latter causes text to truncate (sandbox).

// Text wraps
<Tile.Name name="…" />;

// Text truncates
<Tile.Name>
  <Tile.NameLabel>
    …
  </Tile.NameLabel>
</Tile.Name>;

We are considering making Tile.Name + the name prop work similarly to Tile.Name + Tile.NameLabel in a patch release.