trezor-suite
trezor-suite copied to clipboard
Fix/long token names
Fixes bug reported on Slack
Description
- fix long token name/symbol balance breaking layout
- add bottom margin to the container
- hide the hyphen after token symbol along with the name on narrow screens
- refactor
The affected users reported that they could not see the whole table after they have been sent a scam token with long name and symbol. They did not see a scroll bar. This can be caused by OS settings (on a Mac, "Show scroll bars" can be set to "When scrolling", which hides the scroll bar in this case and only allows navigation by keyboard. Plus most of the table was overflowing and hidden beyond max width anyway, even if they could use the scroll bar.
To avoid potential problems with scrolling, I applied word-break: break-all to the table. Now, everything should be visible (potentially on multiple lines) without scrolling.
Screenshots (if appropriate):
Before (long token name and missing scrollbar):
Before (extra hyphen when token name is hidden and missing margin-bottom):

After (no hyphen):
After:

QA: This is the token causing the problem with scrolling: https://etherscan.io/token/0xc9da518db3abdb90a82c4d1838b7cf9b0c945e7e
Does it make sense to add this to this release?
This behaviour is wrong and already documented here: https://github.com/trezor/trezor-suite/issues/6346#issue-1380493615
If it's a trivial fix, I vote for its removal. cc: @bosomt
@tomasklim I removed the "No transactions" card from the "Tokens" tab. 215d600e7d28d35570afd11d756a5da7bb3e0c71
Found this, but it is not part of this issue. It is already in staging, but not on production.
What is this coming from?
@sime @tomasklim easy to reproduce , see my issue ;) https://github.com/trezor/trezor-suite/issues/4465
@bosomt I meant the Account does not exist bubble in the middle of the screen and not at the top
QA OK
Token is showing correctly now.

Info:
- Suite version: web 22.11.0 (20159af6c91247d769232aa257ec10cd741d1426)
- Browser: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/105.0.0.0 Safari/537.36
- OS: Linux x86_64
- Screen: 1920x1080
- Device: model T 2.5.2 Universal (revision 0d87b55ba4fed7eecc72bf2a94ee473830b095e9)
- Transport: bridge 2.0.32