Improve modal styles on mobile #277
Conversation
| @@ -4,12 +4,15 @@ import { Theme } from "src/styles/theme"; | |||
|
|
|||
There was a problem hiding this comment.
the 480 breakpoint is broken
There was a problem hiding this comment.
Mmmm what do you mean by broken? Which device where you trying to test? It seems that it has very low height.
There was a problem hiding this comment.
I mean that I can not scroll down and see the complete modal. I'm using Chrome Desktop and reducing the width to 480.
| @@ -4,12 +4,15 @@ import { Theme } from "src/styles/theme"; | |||
|
|
|||
| export const useConfirmationModalStyles = createUseStyles((theme: Theme) => ({ | |||
There was a problem hiding this comment.
Under 330px the button is not properly rendered
There was a problem hiding this comment.
No mobile phone has 330px width nowadays... I took as a reference a Pixel 5 (a mobile phone from 3 years ago) and an iPhone SE (released in 2016) to test it and it works fine on that mobiles. Same for the comment below.
There was a problem hiding this comment.
ok, if we don't care about these resolutions, it's all ok. Approved.
| @@ -29,10 +29,16 @@ export const useNetworkBoxStyles = createUseStyles((theme: Theme) => ({ | |||
| alignItems: "center", | |||
There was a problem hiding this comment.
The buttons of the box should wrap:
What does this PR does?
This PR improves the modal styles on mobile devices as users were not able to type the "I understand" phrase check on smaller devices due to the big margin top on them.
Checklist
These are the criteria that every PR should meet, please check them off as you
review them: