From 7d052b01a0d36ce8e5cb5116aee0b30762c02da2 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Fri, 14 Feb 2025 16:49:15 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Right-align=20the=20badge=20in?=
 =?UTF-8?q?=20the=20connection=20tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

A badge should not be displayed on a separate line by itself; it should annotate an item
---
 .../css/components/reusable-components/_settings-block.scss   | 4 ++++
 .../Screens/Settings/Components/Settings/ConnectionStatus.js  | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
index 5b1d04dd4..2ab6c9311 100644
--- a/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
+++ b/modules/ppcp-settings/resources/css/components/reusable-components/_settings-block.scss
@@ -24,6 +24,10 @@
 		padding-top: var(--block-separator-gap, 32px);
 		border-top: var(--block-separator-size, 1px) solid var(--block-separator-color);
 	}
+
+	&.ppcp--pull-right {
+		float: right;
+	}
 }
 
 .ppcp-r-settings-block {
diff --git a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ConnectionStatus.js b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ConnectionStatus.js
index 341f11a3d..1f134eb1d 100644
--- a/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ConnectionStatus.js
+++ b/modules/ppcp-settings/resources/js/Components/Screens/Settings/Components/Settings/ConnectionStatus.js
@@ -21,7 +21,7 @@ const ConnectionStatus = () => {
 			title={ __( 'Connection status', 'woocommerce-paypal-payments' ) }
 			description={ <ConnectionDescription /> }
 		>
-			<SettingsBlock>
+			<SettingsBlock className="ppcp--pull-right">
 				<ControlStaticValue
 					value={
 						<ConnectionStatusBadge
@@ -33,6 +33,7 @@ const ConnectionStatus = () => {
 			</SettingsBlock>
 			<SettingsBlock
 				title={ __( 'Merchant ID', 'woocommerce-paypal-payments' ) }
+				className="ppcp--no-gap"
 			>
 				<ControlStaticValue value={ merchant.id } />
 			</SettingsBlock>