1 files changed, 26 insertions, 26 deletions

diff --git a/apps/workflowengine/src/components/Rule.vue b/apps/workflowengine/src/components/Rule.vue
index 2be9b0fc5e5..703b7832afa 100644
--- a/apps/workflowengine/src/components/Rule.vue
+++ b/apps/workflowengine/src/components/Rule.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="section rule" :style="{ borderLeftColor: operation.color || '' }">
+	<div v-if="operation" class="section rule" :style="{ borderLeftColor: operation.color || '' }">
 		<div class="trigger">
 			<p>
 				<span>{{ t('workflowengine', 'When') }}</span>
@@ -23,28 +23,26 @@
 		</div>
 		<div class="flow-icon icon-confirm" />
 		<div class="action">
-			<div class="buttons">
-				<Actions>
-					<ActionButton v-if="rule.id < -1" icon="icon-close" @click="cancelRule">
-						{{ t('workflowengine', 'Cancel rule creation') }}
-					</ActionButton>
-					<ActionButton v-else icon="icon-close" @click="deleteRule">
-						{{ t('workflowengine', 'Remove rule') }}
-					</ActionButton>
-				</Actions>
-			</div>
 			<Operation :operation="operation" :colored="false">
 				<component :is="operation.options"
 					v-if="operation.options"
 					v-model="rule.operation"
 					@input="updateOperation" />
 			</Operation>
-			<button v-tooltip="ruleStatus.tooltip"
-				class="status-button icon"
-				:class="ruleStatus.class"
-				@click="saveRule">
-				{{ ruleStatus.title }}
-			</button>
+			<div class="buttons">
+				<button v-tooltip="ruleStatus.tooltip"
+					class="status-button icon"
+					:class="ruleStatus.class"
+					@click="saveRule">
+					{{ ruleStatus.title }}
+				</button>
+				<button v-if="rule.id < -1" @click="cancelRule">
+					{{ t('workflowengine', 'Cancel') }}
+				</button>
+				<button v-else @click="deleteRule">
+					{{ t('workflowengine', 'Delete') }}
+				</button>
+			</div>
 		</div>
 	</div>
 </template>
@@ -85,7 +83,7 @@ export default {
 			return this.$store.getters.getOperationForRule(this.rule)
 		},
 		ruleStatus() {
-			if (this.error || !this.rule.valid) {
+			if (this.error || !this.rule.valid || this.rule.checks.some((check) => check.invalid === true)) {
 				return {
 					title: t('workflowengine', 'The configuration is invalid'),
 					class: 'icon-close-white invalid',
@@ -163,11 +161,18 @@ export default {
 		background-position: 10px center;
 	}
 
+	.buttons {
+		display: block;
+		button {
+			float: right;
+			height: 34px;
+		}
+	}
+
 	.status-button {
 		transition: 0.5s ease all;
 		display: block;
-		margin: auto;
-		margin-right: 0;
+		margin: 3px 10px 3px auto;
 	}
 	.status-button.primary {
 		padding-left: 32px;
@@ -199,12 +204,6 @@ export default {
 		.action {
 			max-width: 400px;
 			position: relative;
-			.buttons {
-				position: absolute;
-				right: 0;
-				display: flex;
-				z-index: 1;
-			}
 		}
 		.icon-confirm {
 			background-position: right 27px;
@@ -238,6 +237,7 @@ export default {
 		margin: 0;
 		width: 180px;
 		border-radius: var(--border-radius);
+		color: var(--color-text-maxcontrast);
 		font-weight: normal;
 		text-align: left;
 		font-size: 1em;