Express checkout buttons have a min-width of 240px (#49304)

* express checkout buttons have a min-width of 240px

* Add changefile(s) from automation for the following project(s): woocommerce-blocks

* Fix linting issue

---------

Co-authored-by: github-actions <github-actions@github.com>
This commit is contained in:
Alex Florisca 2024-07-30 15:42:51 +01:00 committed by GitHub
parent 217d628199
commit 13a79c821a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 8 additions and 3 deletions

View File

@ -30,7 +30,7 @@ $border-width: 1px;
.wc-block-components-express-payment__event-buttons { .wc-block-components-express-payment__event-buttons {
list-style: none; list-style: none;
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(33% - 10px), 1fr)); grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
grid-gap: 10px; grid-gap: 10px;
@include breakpoint("<782px") { @include breakpoint("<782px") {
@ -111,7 +111,7 @@ $border-width: 1px;
align-items: center; align-items: center;
text-align: center; text-align: center;
padding: 0 $gap-large; padding: 0 $gap-large;
margin: $gap-larger 0 ( 3.5 * $grid-unit ); margin: $gap-larger 0 (3.5 * $grid-unit);
&::before { &::before {
margin-right: 10px; margin-right: 10px;
@ -142,7 +142,8 @@ $border-width: 1px;
// For Twenty Twenty we need to increase specificity of the title. // For Twenty Twenty we need to increase specificity of the title.
.theme-twentytwenty { .theme-twentytwenty {
.wc-block-components-express-payment .wc-block-components-express-payment__title { .wc-block-components-express-payment
.wc-block-components-express-payment__title {
padding-left: $gap-small; padding-left: $gap-small;
padding-right: $gap-small; padding-right: $gap-small;
} }

View File

@ -0,0 +1,4 @@
Significance: patch
Type: fix
Fixes a bug where some express payment buttons weren't being rendered correctly