[Cashtab] Show one more character on token urls
ClosedPublic
Actions

Authored by bytesofman on Tue, Dec 31, 14:45.

Details

Reviewers

Fabien

Group Reviewers

Restricted Project

Commits

rABCd8d783a44134: [Cashtab] Show one more character on token urls

Summary

This means that stakedXec.com is rendered instead of stakedXec.co...

Test Plan

npm test, screenshot

before

after

Diff Detail

Repository

rABC Bitcoin ABC

Lint

Lint Not Applicable

Unit

Tests Not Applicable

Event Timeline

bytesofman created this revision.Tue, Dec 31, 14:45

Herald added a reviewer: Restricted Project. · View Herald TranscriptTue, Dec 31, 14:45

bytesofman published this revision for review.Tue, Dec 31, 14:46

bytesofman edited the test plan for this revision. (Show Details)

Harbormaster completed remote builds in B31853: Diff 51873.Tue, Dec 31, 14:50

If you have more space, why not add more ?

This revision now requires changes to proceed.Tue, Dec 31, 15:27

In D17442#396588, @Fabien wrote:

If you have more space, why not add more ?

hm good point.

the reason was bc it's optimized for 320px widths, which this still (just) fits in.

But now we are not a "always show the mobile view" app, so we should use media queries.

Added some breakpoints. In testing these seem to work, tho might need adjustment in the future. Ultimately it's not really a make or break thing in the UX, we just don't want it to overflow and cause horizontal scrolling.

1px above the first breakpoint with a "too long" url:

1px above the 2nd breakpoint with a "too long" url:

320px (min supported resolution) (note here we are cutting and ellipsis because i have a dummy "too long" url instead of the real url, so this truncation is expected behavior)

here is why we have the rules, example of what it looks like with no max width if we get an oddly long url (generate this by deleting the "max-width:300px" rule that is in this diff