search

phlask / phlask-map

Code behind the Phlask Web Map
https://beta.phlask.me
34 stars 36 forks source link

bug: Google Maps "+" button appears behind bottom nav bar #525

Closed waltribeiro closed 2 weeks ago

waltribeiro commented 2 months ago

What happened?

The Phlask Beta's nav bar is buried on top of the Google Maps' UI during certain CSS media queries:

chrome-1

How can we fix it?

Seems to be an issue with the class gmnoprint and the selector button.gm-control-active

What Issues can we expect?

While this doesn't break the app, it does effect it in a negative way, namely that if the user clicks on Add Site then sometimes it might zoom into the map.

Note: there was no mention of this in Issues, so wanted to create one here.

How can we reproduce the bug?

1) Open up a browser 2) Use browser's Developer Tools ("option command i" on Mac) 3) Select a smaller screen size, like an iPhone 7, for example. 4) Notice the position of the buttons underneath the top nav later.

Possible Solutions

The + sign isn't needed in a native PWA because the user can pinch-to-zoom instead. This is more intuitive while also freeing up digital real estate.

[!IMPORTANT] MacBook Pro 16" M2 macOS Sonoma 14.5 Reproduced in Chrome and Safari

gcardonag commented 2 weeks ago

Good catch @waltribeiro ! Turns out there was a bug where this wasn't being hidden properly