Checkout: Add min-height to SubmitFooterWrapper

[jjchrisdiehl]

The SubmitFooterWrapper tends to get obscured by the Zendesk support widget on mobile width devices. The first attempt to resolve this was done in #88819 but it didn't quite fix the issue entirely. Instead, it handled the spacing requirements of the x axis but we still needed to manage spacing requirements on the y axis.

Before	After

This PR adds a min-height that prevents the ZD button from overlapping the payment button. Using min height also allows the money back guarantee text to grow without breaking the layout and provides a little extra white space to the bottom of the page which makes it feel less congested.

Related to #88819

Testing Instructions

• Go to checkout and ensure the submit wrapper footer looks correct at desktop size
• Begin to shrink the width of the browser down to 425px (or lower!) and ensure the ZD button doesn't overlap the payment button
• The text should also adjust if the button is about to clip over it
• Go to Jetpack/Akismet checkouts and do the same (with Jetpack, they use a separate footer but it shares the same SubmitFooterWrapper component, there shouldn't be a noticeable difference here)

[github-actions]

Calypso Live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-102700

Jetpack Cloud live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-102700&env=jetpack

Automattic for Agencies live (direct link)

https://calypso.live?image=registry.a8c.com/calypso/app:build-102700&env=a8c-for-agencies

[matticbot]

Here is how your PR affects size of JS and CSS bundles shipped to the user's browser:

Sections (~10 bytes added 📈 [gzipped])

name                          parsed_size           gzip_size
site-purchases                      +16 B  (+0.0%)      +10 B  (+0.0%)
purchases                           +16 B  (+0.0%)      +10 B  (+0.0%)
jetpack-cloud-partner-portal        +16 B  (+0.0%)      +10 B  (+0.0%)
checkout                            +16 B  (+0.0%)      +10 B  (+0.0%)
a8c-for-agencies-purchases          +16 B  (+0.0%)      +10 B  (+0.0%)

Sections contain code specific for a given set of routes. Is downloaded and parsed only when a particular route is navigated to.

Async-loaded Components (~10 bytes added 📈 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal             +16 B  (+0.0%)      +10 B  (+0.0%)
async-load-calypso-blocks-editor-checkout-modal        +16 B  (+0.0%)      +10 B  (+0.0%)

React components that are loaded lazily, when a certain part of UI is displayed for the first time.

Legend

What is parsed and gzip size?

Parsed Size: Uncompressed size of the JS and CSS files. This much code needs to be parsed and stored in memory.
Gzip Size: Compressed size of the JS and CSS files. This much data needs to be downloaded over network.

Generated by performance advisor bot at iscalypsofastyet.com.

[michaeldcain]

LGTM