fix: handle long asset names in send input

[woodenfurniture]

Description

Fixes text overflow of asset label in send input.

Adds a ellipsis for overflow with tooltip.'

Opted to use trimWithEndEllipsis intead of CSS ellipsis so we can predictably and simly detect an overflow render the tooltip accordingly.

Issue (if applicable)

closes #7720

Risk

High Risk PRs Require 2 approvals

Low risk - display concern only.

What protocols, transaction types, wallets or contract interactions might be affected by this PR?

Testing

Check normal length asset names are rendered correctly without a tooltip.
Check very long asset names are truncated with an ellipsis and have a tooltip with the full asset name.

Engineering

Operations

• 🏁 My feature is behind a flag and doesn't require operations testing (yet)

Screenshots (if applicable)

Screen.Recording.2024-09-16.at.2.50.27.PM.mov

[gomesalexandre]

Tested locally, and while name does ellipse now, there are still issues re: overflowing array as well as symbol still rugging the send display:

https://jam.dev/c/3723bfe2-5d04-472d-9fbe-1d7ff71e024c

See arrow placement/symbol rugging "Enter Amount" with long symbols vs. smolish ones:

[woodenfurniture]

Tested locally, and while name does ellipse now, there are still issues re: overflowing array as well as symbol still rugging the send display:

https://jam.dev/c/3723bfe2-5d04-472d-9fbe-1d7ff71e024c

See arrow placement/symbol rugging "Enter Amount" with long symbols vs. smolish ones:

Well spotted, changed approach to use css variables and looking much better:

[woodenfurniture]

Also added some overflow for amounts

[gomesalexandre]

Retested locally, second time's a charm!

Still noticing the same issue re: symbol being weird but should be much more simple to tackle separately in a follow-up :fridaydoge: