frontend: fix inconsistent paddings in accounts page #3725
Conversation
| const inlineStyles = { | ||
| ...(width && { width, maxWidth: '100%' }), | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={style.container}> | ||
| <div className={style.header}> | ||
| <div className={style.header} style={inlineStyles}> |
There was a problem hiding this comment.
Added this so that if a custom width is set on the View (usually placed below the Header), the Header can also have the same width, thus not longer than the View below it.
Previously, on bigger "phones" (width ~ >= 710px), the header is longer than the view below it:
This isn't the only thing that fixes it, but is a part of it.
There was a problem hiding this comment.
This isn't the only thing that fixes it, but is a part of it.
what other fixes?
please see my alternative suggestion below
There was a problem hiding this comment.
what other fixes?
@thisconnect your suggestion works, so we dont need to change the header. But that's only a part of the problem, another is with the Chevron. You can see, it's closer to the edge of the screen compared to the coin logo:
Which is actually the main problem. That other one was technically only problematic for screen size width 700-767px.
There was a problem hiding this comment.
I believe I have introduced the chevron being too far right when I tried to optimize this for small screens
in combination with long 18 decimal ETH amounts and long account names.
Please compare this change with master and test with long ETH amounts and long names on small screen.
I think small screen is more important than this 700+ px viewport. But ofc you could add some styling to improve the ~ 700px viewport specifically.
| const inlineStyles = { | ||
| ...(width && { width, maxWidth: '100%' }), | ||
| }; | ||
|
|
||
| return ( | ||
| <div className={style.container}> | ||
| <div className={style.header}> | ||
| <div className={style.header} style={inlineStyles}> |
There was a problem hiding this comment.
This isn't the only thing that fixes it, but is a part of it.
what other fixes?
please see my alternative suggestion below
shonsirsha
force-pushed
the
frontend-fix-inconsistent-paddings-in-accounts-page
branch
from
d7e7e8c to
3945eb8
Compare
|
Removed the changes on the header, and changed the View's width to be |
thisconnect
left a comment
thisconnect
left a comment
There was a problem hiding this comment.
untested LGTM, but pelase test small screen with long ETH amounts and account names
2 participants
Fix inconsistent left & right paddings in accounts page.
After: