Mobile cut off on map page

[BeeSeeWhy]

On mobile:
-the initial instructions are cut off by web browser UI
-the map cards are cut off by web browser UI
-francis suggestion needs research: @sparing_software

Reported by @juliagoolia and other members

[francisli]

I posted this in Slack but I'll also paste it here in case it is helpful, this library helped me solve issues with positioning in mobile browsers:

https://www.npmjs.com/package/@sparing-software/100vh

The issue is that as the browser toolbars shrink/expand, css positioning can get out of whack...

[nickvisut]

was able to fix this w/dvh and a fallback to vh

(see: https://stackoverflow.com/questions/75079019/tailwind-css-fallback-for-new-screen-length-types-such-as-lvh-svh, https://dev.to/frehner/css-vh-dvh-lvh-svh-and-vw-units-27k4, tailwindlabs/tailwindcss#8216, tailwindlabs/tailwindcss#11317)

[nickvisut]

We can upgrade to the latest tailwind to use their official h-dvh directly (instead of h-screen, which is equivalent to height: 100vh, which simply doesn't work on e.g. mobile Safari).

However, even the latest Tailwind doesn't currently include a fallback to non-supported browsers, so we'd still need to roll our own fallback to vh regardless.