💄 Fix HStack/VStack CSS

modules/ppcp-settings/resources/css/components/_reusable.scss

@@ -5,7 +5,6 @@
 @import './reusable-components/button';
 @import './reusable-components/elements';
 @import './reusable-components/fields';
-@import './reusable-components/hstack';
 @import './reusable-components/navigation';
 @import './reusable-components/onboarding-header';
 @import './reusable-components/payment-method-icons';
@@ -16,6 +15,7 @@
 @import './reusable-components/settings-toggle-block';
 @import './reusable-components/settings-wrapper';
 @import './reusable-components/spinner-overlay';
+@import './reusable-components/stack';
 @import './reusable-components/tab-navigation';
 @import './reusable-components/title-badge';
 @import './reusable-components/welcome-docs';

modules/ppcp-settings/resources/css/components/reusable-components/_stack.scss

@@ -0,0 +1,23 @@
+.ppcp-r-app {
+	.components-flex {
+		display: flex;
+		-webkit-box-align: stretch;
+		align-items: stretch;
+		-webkit-box-pack: center;
+	}
+
+	.components-flex.components-h-stack,
+	.ppcp--horizontal {
+		flex-direction: row;
+		align-items: center;
+	}
+
+	.ppcp--horizontal {
+		justify-content: space-between;
+	}
+
+	.components-flex.components-v-stack {
+		flex-direction: column;
+		justify-content: center;
+	}
+}

modules/ppcp-settings/resources/css/components/screens/settings/_controls.scss

@@ -5,3 +5,9 @@
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
+
+// Fix layout for checkboxes inside a flex-stack.
+.components-checkbox-control > .components-base-control__field > .components-flex {
+	flex-direction: row;
+	gap: 12px;
+}