Wallet page still has a scroll 📜

[felipegaucho]

Description:

The wallet page still has its scroll bar on the side, and I seem unable to get rid of it :)

Steps to Reproduce:

1. Share the player on twitter, or go to https://paratii-video.github.io/paratii-embed/
2. Go to the wallet page. Check there on the right.

Actual result:

In a twitter share:

In the embedding playground (embedded version):

Expected result:

No scroll bar!

[bent0b0x]

Will look at this one later today 👌

[bent0b0x]

@felipegaucho which browser/OS are you using? I believe this is a browser-specific problem/setting, specifically in determining whether scroll bars should show up all of the time when an area is scrollable (which the profile page is). Yes right now there is not much content that makes scrolling the profile page useful, but in the future there will be more content/features on this page so scrolling will need to be enabled. Here is how it looks on my machine (note how they only appear when the user is actively scrolling).

[jrgarou]

@bent0b0x I'm using the mini design as a guide.
On this page, there'll be probably a scroll bar(or not 😀), but we could remove it follow the last @pedrocasa's layout :

[jellegerbrandy]

I think having scrollbars within an iframe is evil and to be avoided at all costs :-)

[bent0b0x]

Will work on this one tomorrow 👍

[bent0b0x]

@pedrocasa can you attach a version of the design jr posted above with the grid overlay?

And while we're at it, if you have grid designs for the other screensize breakpoints feel free to send those over and I'll adjust profile accordingly. I would like to use this as an opportunity to improve the rendering of the profile page at all dimensions (paying attention to things like the dimension of the PTI/ETH boxes, and the font sizes within them, etc).

Below is a quick POC of what the responsive changes in dimensions/font sizes can look like:

---

Here is a slightly more involved POC involving changing sizes of text/buttons in the header as well in tiny mode:

(note to self: this branch has the changes in the gifs above)

[pedrocasa]

Hey Ben
We fix the twitter problem by resizing the player ... now the mini version is 490X280

5pxX5px grid

[pedrocasa]

[jrgarou]

@bent0b0x use the .wide class on .main-modal-wrapper to build this modal

[bent0b0x]

@jrgarou that class seems to specify a width of 530px (but it gets capped at 500px due to a max-width restriction). The embedded version is only 490px wide. Should we consider a percentage based approach?

[bent0b0x]

@pedrocasa let me know what you think. No more scroll, this is how it looks 490x280

[pedrocasa]

Getting better, The distance between the boxes still wrong and maybe we should give less weight for the "dont worry " sentence

[jrgarou]

@jrgarou that class seems to specify a width of 530px (but it gets capped at 500px due to a max-width restriction). The embedded version is only 490px wide. Should we consider a percentage based approach?

@bent0b0x Yes. Lets talk.
I think we should use percent with max-width of the "tiny".
What you think?

May I do this and change the edit profile?

[bent0b0x]

@jrgarou feel free!

[bent0b0x]

@pedrocasa have a look