Checkout: Set Google and Apple Pay button to 100% width

[jjchrisdiehl]

Google and Apple pay have a 60px reduction added to their '100%' width, which I can only presume was to accommodate the support button when it still existed.

Since these two payment buttons handle their styling separately from the other payment buttons, its possible this wasn't updated when the support button was removed. Either way, this PR removes the calculation and simply sets the buttons to be 100% wide.

Before	After

Related to #99214

Testing Instructions

• Its always hard to test these buttons since they require an https connection
• You can follow the original test instructions outlined here, or simply wait for the Calypso Live link to be generated for this PR and use that instead
• Make sure your browser has Google Pay or Apple Pay set up, you'll likely use Chrome to test Google Pay and Safari for Apple Pay
• Go to Checkout and edit your payment details, you should see the payment options available
• Shrink the browser width and ensure the payment button is full width at all browser sizes

[github-actions]

Calypso Live (direct link)

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

Jetpack Cloud live (direct link)

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

Automattic for Agencies live (direct link)

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

[matticbot]

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

• blaze-dashboard
• command-palette-wp-admin
• help-center
• notifications
• odyssey-stats
• whats-new
• wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug fix/apple-google-pay-mobile-width on your sandbox.

[matticbot]

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

Sections (~8 bytes removed 📉 [gzipped])

name            parsed_size           gzip_size
site-purchases        -30 B  (-0.0%)       -3 B  (-0.0%)
purchases             -30 B  (-0.0%)       -3 B  (-0.0%)
checkout              -30 B  (-0.0%)       -5 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 (~5 bytes removed 📉 [gzipped])

name                                             parsed_size           gzip_size
async-load-calypso-my-sites-checkout-modal             -30 B  (-0.0%)       -5 B  (-0.0%)
async-load-calypso-blocks-editor-checkout-modal        -30 B  (-0.0%)       -5 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.

[sirbrillig]

Works for me! Thanks!