COVID-19-electronic-health-system / Corona-tracker

An easy-to-use PWA to monitor the user's wellness and learn about COVID-19.
https://coronatracker.me/
MIT License
235 stars 101 forks source link

Fix bug: education cards cut off on smaller screens, issue #576 #639

Closed gitalink closed 4 years ago

gitalink commented 4 years ago

Fix bug where cards cut off on smaller screens

⚠️ IMPORTANT: Please do not create a Pull Request without creating an issue first.

All changes need to be discusssed before proceeding. Failure to do so may result in the pull request being rejected.

Please be sure to review our Code of Conduct, Contributing Guidelines, and Support documentation before submitting a pull request.


Please include the issue number the pull request fixes by replacing YOUR-ISSUE-HERE in the text below.

Fixes #576

Summary

On smaller screens, the cards were cut off on the bottom. I have adjusted cards sizing for screens with a max width of 400 using Material UI theme.breakpoints.down(400). ## Details

I picked 400 as it includes phones 6/7/8, and does not include Iphones 6/7/8plus.

I also changed the Facts cards title style to match Quiz cards title, as on smaller screens the h4 font was too big compared to the body text size.

Test Plan (required)

I tested on Chrome console and my iPhone8.

Final Checklist

gitalink commented 4 years ago

IMG_1182 This is how it looks on my iPhone8. It would be nice for someone else to test other small screens.

acthelemann commented 4 years ago

I feel like this should scroll on overflow just in case, but I'll accept it

gitalink commented 4 years ago

I removed yarn.lock.

gitalink commented 4 years ago

I will check on scrolling, I agree it should scroll just in case. I thought it did scroll.