Warning modal not working

[thejoefriel]

On mobile it overflows screen and you can't scroll so you can never escape it

Also a number of design issues that need fixing:

• More margin so it’s not so close to top of window
• Reduce font to 16px
• Add margin before OK button
• Have same padding for heading and text
• Have same padding for bottom and top of the modal
• Warning modal doesn’t work on mobile, it overflows and doesn’t let you scroll

[wright1]

Hiya, Could you clarify which modal is giving the trouble, the picures above is what I get when view the modals in mobile view. Is this the same view you are getting for the modals?

The text within the modal is 1rem (as per globalStyles) which is 16px . How much smaller do you want the text? Or can I go with my judgement.

[thejoefriel]

Hey, this is for the modal on the upload page. if you look as iPhone SE you'll see the problem:

It is larger than the viewport. However, you cannot scroll the modal to read the rest, it instead scrolls the page it is overlaying. This also means you can never escape this modal unless you manually edit the url to go to another page

Regarding the font size. If you inspect the text you'll see it is actually displaying as 20px. Also on the side it says the element has a 1.25 rem style applied. Maybe double check you have given it 1rem. And if you have then make sure that the overall global theme has the standard text as 16px. It should be 16px. :+1:

Video showing this element inspection below: https://www.loom.com/share/cc82151cdff44019a6d854b870953b39