trezor-suite icon indicating copy to clipboard operation
trezor-suite copied to clipboard

Fix/long token names

Open komret opened this issue 3 years ago • 1 comments
trafficstars

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): Screenshot 2022-10-13 at 18 03 58 Before (extra hyphen when token name is hidden and missing margin-bottom): Screenshot 2022-10-13 at 18 05 37

After (no hyphen): Screenshot 2022-10-13 at 17 51 55 After: Screenshot 2022-10-13 at 18 21 19

QA: This is the token causing the problem with scrolling: https://etherscan.io/token/0xc9da518db3abdb90a82c4d1838b7cf9b0c945e7e

komret avatar Oct 13 '22 16:10 komret

Does it make sense to add this to this release?

tomasklim avatar Oct 13 '22 20:10 tomasklim

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

sime avatar Oct 14 '22 08:10 sime

@tomasklim I removed the "No transactions" card from the "Tokens" tab. 215d600e7d28d35570afd11d756a5da7bb3e0c71

komret avatar Oct 14 '22 10:10 komret

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 avatar Oct 17 '22 09:10 sime

@sime @tomasklim easy to reproduce , see my issue ;) https://github.com/trezor/trezor-suite/issues/4465

bosomt avatar Oct 17 '22 09:10 bosomt

@bosomt I meant the Account does not exist bubble in the middle of the screen and not at the top

tomasklim avatar Oct 17 '22 18:10 tomasklim

QA OK

Token is showing correctly now.

image

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

STew790 avatar Nov 01 '22 13:11 STew790