Fixes: Contact form submit button does not show up when screen resolution height <= 690px

[edwinjue]

Added a grid container to bottom of contact form with a height equivalent to the footer to compensate for a fixed positioned footer that blocks visibility of portions of the contact form, namely submit button. Submit button now appears when scrolling all the way down to bottom when there is not enough screen real-estate as per attached screenshot (compare with attachment in #1340)

Alternative fixes:
Change position: 'fixed' to position: 'sticky' in Footer as per stackoverflow (see which browsers support position: 'sticky')

Fixes #1340

• Up to date with dev branch
• Branch name follows guidelines
• All PR Status checks are successful
• Peer reviewed and approved

Any questions? See the getting started guide

[nichhk]

I prefer changing the positioning of the footer, since this is an issue that could affect all of our pages (not just contact). Wdyt?

[edwinjue]

Thanks for the feedback Nich. Sure, that works for me as long as you are okay with position: sticky not being available on older browsers. Although we use MUI, we should keep in mind there are still a few older browsers where position: sticky isn't available where mui is still supported.

• position: sticky browser compatibility
• MUI browser compatibility

Additionally, it currently seems the other pages may be utilizing some bottom padding to mitigate the issue:

311-data/client/components/main/About.jsx

Line 35 in c0a2caf

paddingBottom: '6em',

[edwinjue]

ok, in the latest PR, I restored my original contact form design and updated position in the footer component from position: fixed to position: sticky. I confirmed the document will scroll down to the submit button when screen resolution height <= 690px. the only other pages I was able to verify are loading as expected after this change are Map and About page. the other pages on my local copy (FAQ, Blog, Privacy) seem to want to load content from contentful which I do not have an API key for

[nichhk]

Looks good! One small comment.

Re: other pages compensating for the old fixed behavior: can you open an issue to investigate and fix those instances?

Re: browser compatibility: yeah, I took a look, and I don't think we need to worry about those :)