From d8ecb019de63f42f36a7050410dc206ef36b6d74 Mon Sep 17 00:00:00 2001
From: Philipp Stracker <p.stracker@syde.com>
Date: Wed, 22 Jan 2025 15:30:22 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=A7=20Adjust=20architecture=20of=20But?=
 =?UTF-8?q?tonSettingsBlock?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../reusable-components/_settings-block.scss       |  4 +---
 .../SettingsBlocks/ButtonSettingsBlock.js          | 14 ++++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

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 8ec6cacf0..8bf0ce79f 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
@@ -160,12 +160,10 @@
 	}
 }
 
-.ppcp-r-settings-block__button {
-	display: flex;
+.ppcp--horizontal {
 	flex-direction: row;
 	align-items: center;
 	justify-content: space-between;
-	gap: 50px;
 }
 
 .ppcp-r-settings-block__accordion {
diff --git a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
index 42bc832ed..812ae0d3d 100644
--- a/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
+++ b/modules/ppcp-settings/resources/js/Components/ReusableComponents/SettingsBlocks/ButtonSettingsBlock.js
@@ -1,14 +1,16 @@
 import { Button } from '@wordpress/components';
 
 import SettingsBlock from '../SettingsBlock';
-import { Action, Description, Header, Title } from '../Elements';
+import { Action } from '../Elements';
 
 const ButtonSettingsBlock = ( { title, description, ...props } ) => (
-	<SettingsBlock { ...props } className="ppcp-r-settings-block__button">
-		<Header>
-			<Title>{ title }</Title>
-			<Description>{ description }</Description>
-		</Header>
+	<SettingsBlock
+		title={ title }
+		headerDescription={ description }
+		horizontalLayout={ true }
+		className="ppcp-r-settings-block__button"
+		{ ...props }
+	>
 		<Action>
 			<Button
 				isBusy={ props.actionProps?.isBusy }