From d60eafc820c2dfe45bee34eb302112d1c6aa459a Mon Sep 17 00:00:00 2001
From: Paolo Luigi Scala <paolo@yoast.com>
Date: Fri, 10 Nov 2023 16:53:57 +0100
Subject: [PATCH 1/2] Fix title alignment

---
 packages/js/src/components/WincherSEOPerformanceModal.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/js/src/components/WincherSEOPerformanceModal.js b/packages/js/src/components/WincherSEOPerformanceModal.js
index 3d65bf9e42c..b12b57eb6a4 100644
--- a/packages/js/src/components/WincherSEOPerformanceModal.js
+++ b/packages/js/src/components/WincherSEOPerformanceModal.js
@@ -122,7 +122,7 @@ export default function WincherSEOPerformanceModal( props ) {
 						id={ `wincher-open-button-${location}` }
 						onClick={ onModalOpen }
 					>
-						<MetaboxButton.Text>{ title }</MetaboxButton.Text>
+						<MetaboxButton.Text className="yst-ml-2">{ title }</MetaboxButton.Text>
 						<ChartBarIcon className="yst-h-5 yst-w-5 yst-text-slate-500" { ...svgAriaProps } />
 					</MetaboxButton>
 				</div>

From fb555fe48aac003f3617c7736b73e1b98b8b6f8f Mon Sep 17 00:00:00 2001
From: Enrico Battocchi <enrico.battocchi@gmail.com>
Date: Fri, 10 Nov 2023 23:05:48 +0100
Subject: [PATCH 2/2] Set padding explicitly for all the sides to prevent
 overriding

---
 packages/js/src/components/MetaboxButton.js              | 2 +-
 packages/js/src/components/WincherSEOPerformanceModal.js | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/js/src/components/MetaboxButton.js b/packages/js/src/components/MetaboxButton.js
index f879c959c1c..8be24fc7a7f 100644
--- a/packages/js/src/components/MetaboxButton.js
+++ b/packages/js/src/components/MetaboxButton.js
@@ -40,7 +40,7 @@ export const MetaboxButton = ( { className, ...props } ) => (
 	<button
 		type="button"
 		className={ classNames(
-			"yst-flex yst-items-center yst-w-full yst-pl-6 yst-p-4 yst-space-x-2 yst-border-t yst-border-t-[rgb(0,0,0,0.2)] yst-rounded-none yst-transition-all hover:yst-bg-[#f0f0f0] focus:yst-outline focus:yst-outline-[1px] focus:yst-outline-[color:#0066cd] focus:-yst-outline-offset-1 focus:yst-shadow-[0_0_3px_rgba(8,74,103,0.8)]",
+			"yst-flex yst-items-center yst-w-full yst-pt-4 yst-pb-4 yst-pr-4 yst-pl-6 yst-space-x-2 yst-border-t yst-border-t-[rgb(0,0,0,0.2)] yst-rounded-none yst-transition-all hover:yst-bg-[#f0f0f0] focus:yst-outline focus:yst-outline-[1px] focus:yst-outline-[color:#0066cd] focus:-yst-outline-offset-1 focus:yst-shadow-[0_0_3px_rgba(8,74,103,0.8)]",
 			className
 		) }
 		{ ...props }
diff --git a/packages/js/src/components/WincherSEOPerformanceModal.js b/packages/js/src/components/WincherSEOPerformanceModal.js
index b12b57eb6a4..3d65bf9e42c 100644
--- a/packages/js/src/components/WincherSEOPerformanceModal.js
+++ b/packages/js/src/components/WincherSEOPerformanceModal.js
@@ -122,7 +122,7 @@ export default function WincherSEOPerformanceModal( props ) {
 						id={ `wincher-open-button-${location}` }
 						onClick={ onModalOpen }
 					>
-						<MetaboxButton.Text className="yst-ml-2">{ title }</MetaboxButton.Text>
+						<MetaboxButton.Text>{ title }</MetaboxButton.Text>
 						<ChartBarIcon className="yst-h-5 yst-w-5 yst-text-slate-500" { ...svgAriaProps } />
 					</MetaboxButton>
 				</div>