fix: cant see buttons in drawer footer

[emilyjablonski]

Pull Request Template

Issue Overview

This PR addresses #1641

• This change addresses the issue in full

Description

Allows users to see the buttons in the footer of the filter modal on the public site.

How Can This Be Tested/Reviewed?

You have to test on a mobile device - the issue doesn't appear in the mobile emulator. You can visit the deploy preview link.

This issue in part stems from the fact that the URL across different mobile browsers is in a different place and is a different height, so 100vh is treated differently. The URL box in latest Safari is on the bottom vs in Chrome it's on the top.

There are new dynamic viewport values that take this difference into account on mobile (documentation here). This looks to work great on recent browsers, but because it's new it's not supported across all versions. When the new value is not supported, I'm just manually adding bottom padding below the footer so that the buttons sit above the mobile browser footer. It's not perfect and there's extra space, but the buttons are accessible as a short term fix. You can test this unsupported version in BrowserStack on the iPhone 12 emulator using the deploy preview to see the other styles take effect (also below).

The seeds Dialog and Drawer are close to being merged, and with the uptake of that and the fact that the footer behavior is different in the new one where the footer is sticky, hopefully that will resolve this issue in the long term. We're also chatting next week about what our support is across devices and browsers.

Checklist:

• My code follows the style guidelines of this project
• I have added QA notes to the issue with applicable URLs
• I have performed a self-review of my own code
• I have reviewed the changes in a desktop view
• I have reviewed the changes in a mobile view
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published in downstream modules
• I have assigned reviewers
• I have run yarn generate:client and/or created a migration if I made backend changes that require them
• My commit message(s) is/are polished, and any breaking changes are indicated in the message and are well-described
• Commits made across packages purposefully have the same commit message/version change, else are separated into different commits

Reviewer Notes:

Steps to review a PR:

• Read and understand the issue, and ensure the author has added QA notes
• Review the code itself from a style point of view
• Pull the changes down locally and test that the acceptance criteria is met
• Also review the acceptance criteria on the Netlify deploy preview (noting that these do not yet include any backend changes made in the PR)
• Either explicitly ask a clarifying question, request changes, or approve the PR if there are small remaining changes but the PR is otherwise good to go

On Merge:

If you have one commit and message, squash. If you need each message to be applied, rebase and merge.

[netlify]

✅ Deploy Preview for detroit-public-staging ready!

Name	Link
🔨 Latest commit	6120b7e
🔍 Latest deploy log	https://app.netlify.com/sites/detroit-public-staging/deploys/652d78811592210008681fce
😎 Deploy Preview	https://deploy-preview-1642--detroit-public-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for detroit-partners-staging ready!

Name	Link
🔨 Latest commit	6120b7e
🔍 Latest deploy log	https://app.netlify.com/sites/detroit-partners-staging/deploys/652d7881e259d9000810cdf8
😎 Deploy Preview	https://deploy-preview-1642--detroit-partners-staging.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for detroit-partners-prod ready!

Name	Link
🔨 Latest commit	6120b7e
🔍 Latest deploy log	https://app.netlify.com/sites/detroit-partners-prod/deploys/652d788146347b00088c0b14
😎 Deploy Preview	https://deploy-preview-1642--detroit-partners-prod.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[ColinBuyck]

I'm still seeing this happen on safari mobile when the search bar is up (woah this screenshot is large)

But I remember fixing this before here, granted that might now be a UI-C change... let me know what you think! #1287

[ludtkemorgan]

This looks good. One thing though is that we still unfortunately have the "dev" branch in Detroit due to not having full autonomy over the deployment setup. Could you first merge this in dev and then carry it over to main?