fix: Modal zap layout on iPhone SE - Githubissues

yearn / yearn-finance-v3

Yearn Finance Web App v3

https://yearn.finance

123 stars 138 forks source link

fix: Modal zap layout on iPhone SE #695

Open huggingbot opened 2 years ago

huggingbot commented 2 years ago

Description

Added CSS changes for devices with 400px width or lower
400px is used as that's the point where the text would wrap to the second line
Removed padding so that font size can be at 1.3rem, else with the existing padding, font size has to be reduced to 1.2rem
Centered the text so that the container's left and right are aligned
341px will be the next point where the text would wrap again

Related Issue

Fixes #692

Motivation and Context

Better display for iPhone SE users

How Has This Been Tested?

Locally by viewing the updated modal layout

Screenshots (if appropriate):

zap

aws-amplify-us-east-1[bot] commented 2 years ago

This pull request is automatically being deployed by Amplify Hosting (learn more).

Access this pull request here: https://pr-695.d27dgpz01hmbvx.amplifyapp.com

turtlemoji commented 2 years ago

@huggingbot We should hold this since the layout and style changed in: https://github.com/yearn/yearn-finance-v3/pull/694