Ensure full token names show if space available

[markmhendrickson]

This token is fraudulent so inadvertently it's good we cut it off, but in general we should show the entire token name if there's space (to the right) to show it on the home screen, such as here when in full tab mode:

[fbwoolf]

I actually did this bc mine were going to multiple lines and causing issues in the UI...

What else should we do here then?

[fbwoolf]

Pretty sure there was an issue at one point to address these long names?

[pete-watters]

I think here we need to use ellipsis to truncate if we are in the extension view, but then in full screen view if there is space allow the full width to be used.

We increased the minimum page width so there may be more space to show them there.

We could also possibly add a tooltip in extension mode so if the name gets cut off you can hover and see it.

@mica000 do you have any ideas on improving this?

[aryzing]

Would something like this work in all views?

.class {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[mica000]

I think here we need to use ellipsis to truncate if we are in the extension view, but then in full screen view if there is space allow the full width to be used.

We increased the minimum page width so there may be more space to show them there.

We could also possibly add a tooltip in extension mode so if the name gets cut off you can hover and see it.

@mica000 do you have any ideas on improving this?

Yes, this is the expected behavior 🙌

[mica000]

I actually did this bc mine were going to multiple lines and causing issues in the UI...

What else should we do here then?

For the row that is overlapping - this looks like a visual bug? Not sure exactly why this is happening. Any clarification possible to understand what's going on?

Ideally the container is set to wrap around the row content so no scroll needed if there is space to grow.

When there is no space to grow, then we show the scroll

[kyranjamie]

We'd need fluid width text truncation, guide here https://css-tricks.com/flexbox-truncated-text (some what tricky when not a fixed width).

Anyone that jumps on this, use viewport width to establish whether to truncate (not whenPageType()).

[pete-watters]

Thanks Kyran, I can work on this to solve it

[pete-watters]

I have opened a PR for this. I chose to use a grid instead of fluid width text truncation as it seems cleaner and a better fit here.