Fix modal header alignment on safari

[KarlisJ]

Fixes #5548

Changes proposed in this Pull Request

Fix header alignment for the "Enable Manual Capture" modal on the Safari browser.

Current CSS relies on complex margin and padding rules overrides that include negative margins. Safari doesn't recognize them well, so I've refactored the CSS to avoid negative margins.

The overall design is exactly the same.

Before:

After:

Testing instructions

• Open payments->settings in Safari browser
• Click "Issue an authorization on checkout, and capture later" checkbox
• Observe the modal header

---

• [ x] Run npm run changelog to add a changelog file, choose patch to leave it empty if the change is not significant. You can add multiple changelog files in one PR by running this command a few times.
• [ x] Covered with tests (or have a good reason not to test in description ☝️)
• [ x] Tested on mobile (or does not apply)

Post merge

• Link to testing instructions from release testing doc following these instructions : Add link here / 'QA Testing Not Applicable'
• Add or update critical flows and testing instructions for critical flows, if applicable.
• Add what's changed (description, screenshot, demo videos etc.) to the release announcement post, if applicable.

[botwoo]

Test the build

Option 1. Jetpack Beta

• Install and activate Jetpack Beta.
• Use this build by searching for PR number 7181 or branch name fix/5548-modal-header-alignement-on-safari in your-test.site/wp-admin/admin.php?page=jetpack-beta&plugin=woocommerce-payments

Option 2. Jurassic Ninja - available for logged-in A12s

🚀 Launch a JN site with this branch 🚀

ℹ️ Install this Tampermonkey script to get more options.

---

Build info:

• Latest commit: 9471cfc
• Build time: 2023-09-19 04:28:47 UTC

Note: the build is updated when a new commit is pushed to this PR.

[github-actions]

Size Change: +36 B (0%)

Total Size: 1.41 MB

Filename	Size	Change
release/woocommerce-payments/dist/index-rtl.css	36.1 kB	+4 B (0%)
release/woocommerce-payments/dist/index.css	36.1 kB	+6 B (0%)
release/woocommerce-payments/dist/multi-currency-rtl.css	2.88 kB	+6 B (0%)
release/woocommerce-payments/dist/multi-currency.css	2.88 kB	+6 B (0%)
release/woocommerce-payments/dist/order-rtl.css	676 B	+1 B (0%)
release/woocommerce-payments/dist/order.css	679 B	+3 B (0%)
release/woocommerce-payments/dist/payment-gateways-rtl.css	690 B	+4 B (+1%)
release/woocommerce-payments/dist/payment-gateways.css	692 B	+4 B (+1%)
release/woocommerce-payments/dist/settings-rtl.css	8.9 kB	+2 B (0%)

ℹ️ View Unchanged

Filename	Size
release/woocommerce-payments/assets/css/admin.css	1.03 kB
release/woocommerce-payments/assets/css/success.css	158 B
release/woocommerce-payments/dist/blocks-checkout-rtl.css	1.51 kB
release/woocommerce-payments/dist/blocks-checkout.css	1.51 kB
release/woocommerce-payments/dist/blocks-checkout.js	73.7 kB
release/woocommerce-payments/dist/checkout-rtl.css	440 B
release/woocommerce-payments/dist/checkout.css	441 B
release/woocommerce-payments/dist/checkout.js	28.7 kB
release/woocommerce-payments/dist/index.js	280 kB
release/woocommerce-payments/dist/multi-currency-analytics.js	1.05 kB
release/woocommerce-payments/dist/multi-currency-switcher-block.js	60 kB
release/woocommerce-payments/dist/multi-currency.js	54.6 kB
release/woocommerce-payments/dist/order.js	40.7 kB
release/woocommerce-payments/dist/payment-gateways.js	38.3 kB
release/woocommerce-payments/dist/payment-request-rtl.css	146 B
release/woocommerce-payments/dist/payment-request.css	146 B
release/woocommerce-payments/dist/payment-request.js	11.7 kB
release/woocommerce-payments/dist/product-details.js	789 B
release/woocommerce-payments/dist/settings.css	8.91 kB
release/woocommerce-payments/dist/settings.js	231 kB
release/woocommerce-payments/dist/subscription-edit-page.js	669 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal-rtl.css	519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.css	519 B
release/woocommerce-payments/dist/subscription-product-onboarding-modal.js	20.2 kB
release/woocommerce-payments/dist/subscription-product-onboarding-toast.js	693 B
release/woocommerce-payments/dist/subscriptions-empty-state-rtl.css	117 B
release/woocommerce-payments/dist/subscriptions-empty-state.css	117 B
release/woocommerce-payments/dist/subscriptions-empty-state.js	19.4 kB
release/woocommerce-payments/dist/tos-rtl.css	230 B
release/woocommerce-payments/dist/tos.css	231 B
release/woocommerce-payments/dist/tos.js	21.8 kB
release/woocommerce-payments/dist/upe_checkout-rtl.css	440 B
release/woocommerce-payments/dist/upe_checkout.css	441 B
release/woocommerce-payments/dist/upe_checkout.js	34 kB
release/woocommerce-payments/dist/upe_split_checkout-rtl.css	440 B
release/woocommerce-payments/dist/upe_split_checkout.css	441 B
release/woocommerce-payments/dist/upe_split_checkout.js	34.6 kB
release/woocommerce-payments/dist/upe_with_deferred_intent_creation_checkout.js	36.6 kB
release/woocommerce-payments/dist/upe-blocks-checkout-rtl.css	1.51 kB
release/woocommerce-payments/dist/upe-blocks-checkout.css	1.51 kB
release/woocommerce-payments/dist/upe-blocks-checkout.js	39.5 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout-rtl.css	1.51 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.css	1.51 kB
release/woocommerce-payments/dist/upe-split-blocks-checkout.js	41 kB
release/woocommerce-payments/dist/woopay-express-button-rtl.css	146 B
release/woocommerce-payments/dist/woopay-express-button.css	146 B
release/woocommerce-payments/dist/woopay-express-button.js	50.6 kB
release/woocommerce-payments/dist/woopay-rtl.css	3.85 kB
release/woocommerce-payments/dist/woopay.css	3.85 kB
release/woocommerce-payments/dist/woopay.js	71.6 kB
release/woocommerce-payments/includes/subscriptions/assets/css/plugin-page.css	633 B
release/woocommerce-payments/includes/subscriptions/assets/js/plugin-page.js	720 B
release/woocommerce-payments/vendor/automattic/jetpack-assets/build/i18n-loader.js	2.43 kB
release/woocommerce-payments/vendor/automattic/jetpack-assets/src/js/i18n-loader.js	1.01 kB
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-ajax.js	522 B
release/woocommerce-payments/vendor/automattic/jetpack-connection/dist/tracks-callables.js	581 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/babel.config.js	160 B
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.css	2.32 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.js	13.8 kB
release/woocommerce-payments/vendor/automattic/jetpack-identity-crisis/build/index.rtl.css	2.32 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/about.css	1.2 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-empty-state.css	291 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin-order-statuses.css	403 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/admin.css	3.56 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/checkout.css	299 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/modal.css	742 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/view-subscription.css	572 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/css/wcs-upgrade.css	411 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin-pointers.js	544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/admin.js	9.63 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.js	6.8 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/jstz.min.js	3.83 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-coupon.js	544 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/meta-boxes-subscription.js	2.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.js	22.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/moment.min.js	11.6 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/payment-method-restrictions.js	1.29 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/admin/wcs-meta-boxes-order.js	502 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/payment-methods.js	355 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/single-product.js	429 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/view-subscription.js	1.38 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/frontend/wcs-cart.js	781 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/modal.js	1.1 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/assets/js/wcs-upgrade.js	1.27 kB
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.css	392 B
release/woocommerce-payments/vendor/woocommerce/subscriptions-core/build/index.js	3.06 kB

_{compressed-size-action}

[kalessil]

LGTM and tests well!