From bb68d53798953c02be100ef3a1501eeb11f8dbf5 Mon Sep 17 00:00:00 2001
From: Raluca Stan <ralucastn@gmail.com>
Date: Thu, 10 Aug 2023 17:42:15 +0200
Subject: [PATCH] Fix express button display in the Cart block

When multiple buttons are displayed they don't appear stacked. This PR fixes a regression;
---
 .../express-payment/style.scss                | 47 ++++++++++---------
 1 file changed, 24 insertions(+), 23 deletions(-)

diff --git a/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss b/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
index 990809e7fac..84563139d38 100644
--- a/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
+++ b/assets/js/blocks/cart-checkout-shared/payment-methods/express-payment/style.scss
@@ -4,41 +4,42 @@ $border-radius: 5px;
 .wc-block-components-express-payment {
 	margin: auto;
 	position: relative;
+}
 
-	.wc-block-components-express-payment__event-buttons {
-		list-style: none;
-		display: grid;
-		grid-template-columns: repeat(auto-fit, minmax(calc(33% - 10px), 1fr));
-		grid-gap: 10px;
-		box-sizing: border-box;
-		width: 100%;
-		padding: 0;
+
+.wc-block-components-express-payment__event-buttons {
+	width: 100%;
+	padding: 0;
+	margin: 0;
+	overflow: hidden;
+	text-align: center;
+	> li {
 		margin: 0;
-		overflow: hidden;
-		text-align: center;
+		width: 100%;
 
-		> li {
-			margin: 0;
+		> img {
 			width: 100%;
-
-			> img {
-				width: 100%;
-				height: 48px;
-			}
-		}
-	}
-
-	@include breakpoint("<782px") {
-		.wc-block-components-express-payment__event-buttons {
-			grid-template-columns: 1fr;
+			height: 48px;
 		}
 	}
 }
 
+
 .wc-block-components-express-payment--checkout {
 	/* stylelint-disable-next-line function-calc-no-unspaced-operator */
 	margin-top: calc($border-radius * 3);
 
+	.wc-block-components-express-payment__event-buttons {
+		list-style: none;
+		display: grid;
+		grid-template-columns: repeat(auto-fit, minmax(calc(33% - 10px), 1fr));
+		grid-gap: 10px;
+
+		@include breakpoint("<782px") {
+			grid-template-columns: 1fr;
+		}
+	}
+
 	.wc-block-components-express-payment__title-container {
 		display: flex;
 		flex-direction: row;