Commit 807058f619 for woocommerce
commit 807058f6195a042e289f36920f3bd42cfea1508c
Author: Cvetan Cvetanov <cvetan.cvetanov@automattic.com>
Date: Mon Jun 30 20:11:33 2025 +0300
[NOX In-context] Improve styling of payment methods selection screen for better cross-browser support (#59244)
* Improve the styling of the payment methods selection screen for better cross-browser support.
diff --git a/plugins/woocommerce/changelog/fix-WOOPLUG-4820-pm-selection-cutoff-safari b/plugins/woocommerce/changelog/fix-WOOPLUG-4820-pm-selection-cutoff-safari
new file mode 100644
index 0000000000..85c9b47f5d
--- /dev/null
+++ b/plugins/woocommerce/changelog/fix-WOOPLUG-4820-pm-selection-cutoff-safari
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Improved styling of payment methods selection screen for better cross-browser support.
diff --git a/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/payments-content.scss b/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/payments-content.scss
index bb1479e1cc..8d533fe786 100644
--- a/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/payments-content.scss
+++ b/plugins/woocommerce/client/admin/client/launch-your-store/hub/main-content/pages/payments-content.scss
@@ -11,17 +11,24 @@
height: 100%;
border-radius: 10px;
box-shadow: 0 15px 20px 0 rgba(0, 0, 0, 0.04), 0 13px 15px 0 rgba(0, 0, 0, 0.03), 0 6px 10px 0 rgba(0, 0, 0, 0.02), 0 0 1px 0 rgba(0, 0, 0, 0.25);
- overflow-y: auto;
+
+ // Prevent the canvas from exceeding the viewport height.
+ &:has(.woocommerce-recommended-payment-methods) {
+ max-height: calc(100vh - 32px);
+ overflow-y: auto;
+ overflow-x: hidden;
+ }
}
.settings-payments-onboarding-modal__content {
margin: 0;
+ background: transparent;
}
.woocommerce-recommended-payment-methods {
- margin-top: 24px;
background: transparent;
top: $gap-small;
+ max-height: 100%;
&__header {
&--title {
@@ -31,10 +38,18 @@
}
}
}
+
+ &__list {
+ background: $white;
+ }
+
+ &__footer {
+ background-color: transparent;
+ }
}
.settings-payments-onboarding-modal__wrapper {
- background-color: $white;
+ background-color: transparent;
}
.woocommerce-layout__header {
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/components/header/style.scss b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/components/header/style.scss
index 66cc824337..2365388893 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/components/header/style.scss
+++ b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/components/header/style.scss
@@ -15,7 +15,11 @@
}
&--close {
- padding: 6px 0;
+ padding: 6px;
+
+ @media screen and (max-width: $break-medium) {
+ padding: 6px 0;
+ }
}
}
}
diff --git a/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/style.scss b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/style.scss
index 0ad48ac964..aa2860a1bc 100644
--- a/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/style.scss
+++ b/plugins/woocommerce/client/admin/client/settings-payments/onboarding/providers/woopayments/steps/payment-methods-selection/style.scss
@@ -1,5 +1,5 @@
#payment_methods.settings-payments-onboarding-modal__step .settings-payments-onboarding-modal__step--content {
- padding: 16px 32px 16px 0;
+ padding: 0;
}
.settings-payments-onboarding-modal__step--content {
@@ -42,7 +42,7 @@
}
@media screen and (max-width: $break-medium) {
- padding: $gap-large;
+ padding: $gap;
}
}
@@ -124,36 +124,22 @@
}
.woocommerce-recommended-payment-methods {
- // Width to fill available space.
- width: 100% !important;
- width: -webkit-fill-available !important; /* Mozilla-based browsers will ignore this. */
- width: fill-available !important;
- width: -moz-available !important; /* WebKit-based browsers will ignore this. */
- margin-right: $gap-small + $gap-smallest;
display: flex;
flex-direction: column;
- height: calc(100% - 60px); // Account for continue button
- max-height: 100%; // Ensure it doesn't grow beyond parent
- overflow: hidden; // Prevent content from spilling out
- padding: 0 !important; // There is a padding on the parent container that we need to override.
- border-bottom: none !important;
- position: fixed;
+ height: 100%;
@media screen and (max-width: $break-medium) {
- height: calc(100% - 100px); // Account for small screen content being longer on the page.
margin-top: -2px; // Compensate for the border on the header.
}
&__header {
// This is the padding for the header. Controlling each side to adapt to the content.
- padding: calc($gap-large / 2) $gap-large $gap-large $gap-large * 1.5;
+ padding: $gap-large calc($gap * 2);
border-bottom: 1px solid $gray-200;
flex-shrink: 0;
background: $white;
position: relative;
z-index: 1;
- min-height: 40px;
- gap: 8px;
display: flex;
align-items: center;
flex-wrap: wrap;
@@ -163,15 +149,17 @@
justify-content: space-between;
align-items: center;
width: 100%;
+ min-height: 40px;
h1 {
padding: 0;
height: auto;
margin-top: 0;
margin-bottom: 0;
- font-weight: 590;
- font-size: 16px;
- color: #070707;
+ font-weight: 500;
+ font-size: 15px;
+ color: $gray-900;
+ line-height: 20px;
}
}
@@ -179,12 +167,12 @@
font-size: 13px;
font-weight: 400;
line-height: 20px;
- color: #757575;
+ color: $gray-700;
flex-basis: 100%;
}
@media screen and (max-width: $break-medium) {
- padding: $gap $gap-large;
+ padding: $gap;
}
.woocommerce-settings-payments-header__title {
@@ -209,6 +197,12 @@
display: none;
}
+ .components-toggle-control {
+ .components-flex {
+ gap: 0;
+ }
+ }
+
@media screen and (max-width: $break-medium) {
padding: 0;
}
@@ -218,7 +212,7 @@
.woocommerce-recommended-payment-methods__list_footer {
display: flex;
justify-content: flex-end;
- padding: $gap-large;
+ padding: $gap-large calc($gap * 2);
background: $white;
flex-shrink: 0;
@@ -227,7 +221,7 @@
}
@media screen and (max-width: $break-medium) {
- padding: $gap;
+ padding: 18px $gap;
}
}
}