skalnik / aqi-wtf

😷 WTF is the AQI near me right now?!
https://aqi.wtf
MIT License
44 stars 12 forks source link

Fix iOS home bar and footer overlap #45

Closed skalnik closed 4 years ago

skalnik commented 4 years ago

Another attempt to solve the bug in https://github.com/skalnik/aqi-wtf/issues/33 where the iOS home bar and footer overlap.


Closes https://github.com/skalnik/aqi-wtf/issues/33

vercel[bot] commented 4 years ago

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/skalnik/aqi-wtf/mflajq5uz
✅ Preview: https://aqi-wtf-git-fix-ios-footer-overlap.skalnik.vercel.app

skalnik commented 4 years ago

Hm, no dice. https://dev.to/marionauta/avoid-notches-in-your-pwa-with-just-css-al7 does seem to indicate I'm on the right path though.

skalnik commented 4 years ago

The footer no longer overlaps! However, the notch cuts into the text when you have a phone sideways now 😅 IMG_5600

The notch in portrait also remains black. I guess we have no control over that ☹

obra commented 4 years ago

Tested on an XS running current release iOS. Totally reasonable for me.

(I wouldn't worry too much about the notch cutting into text. I think we want to play with text size and position more anyway.)

skalnik commented 4 years ago

Then I guess this is good to go. We can definitely futz with the spacing around the edges a bit more in the future 👍

I'll merge this now and I'll open a new issue for the notch cutting into the text to dig into separately. Two steps forward, one step back I suppose.