From 34e8645e054bf65c44427ed3d05f652767813e41 Mon Sep 17 00:00:00 2001
From: Daniel Kesselberg <mail@danielkesselberg.de>
Date: Wed, 9 Oct 2024 17:31:36 +0200
Subject: [PATCH] fixup! feat: mail filters

Signed-off-by: Daniel Kesselberg <mail@danielkesselberg.de>
---
 src/components/mailFilter/UpdateModal.vue | 30 ++++++++++++++---------
 1 file changed, 18 insertions(+), 12 deletions(-)

diff --git a/src/components/mailFilter/UpdateModal.vue b/src/components/mailFilter/UpdateModal.vue
index 3f6f0e5b7a..4279f0396c 100644
--- a/src/components/mailFilter/UpdateModal.vue
+++ b/src/components/mailFilter/UpdateModal.vue
@@ -21,18 +21,20 @@
 			<div class="filter-tests">
 				<h6>{{ t('mail', 'Tests') }}</h6>
 
-				<p>
-					{{ t('mail', 'Tests are applied to incoming emails on your mail server, targeting fields such as subject (the email\'s subject line), from (the sender), and to (the recipient). You can use the following operators to define conditions for these fields:') }}
-				</p>
-				<p>
-					<strong>is</strong>: {{ t('mail', 'An exact match. The field must be identical to the provided value.') }}
-				</p>
-				<p>
-					<strong>contains</strong>: {{ t('mail', 'A substring match. The field matches if the provided value is contained within it. For example, "report" would match "port".') }}
-				</p>
-				<p>
-					<strong>matches</strong>: {{ t('mail', 'A pattern match using wildcards. The "*" symbol represents any number of characters (including none), while "?" represents exactly one character. For example, "*report*" would match "Business report 2024".') }}
-				</p>
+				<div class="help-text">
+					<p>
+						{{ t('mail', 'Tests are applied to incoming emails on your mail server, targeting fields such as subject (the email\'s subject line), from (the sender), and to (the recipient). You can use the following operators to define conditions for these fields:') }}
+					</p>
+					<p>
+						<strong>is</strong>: {{ t('mail', 'An exact match. The field must be identical to the provided value.') }}
+					</p>
+					<p>
+						<strong>contains</strong>: {{ t('mail', 'A substring match. The field matches if the provided value is contained within it. For example, "report" would match "port".') }}
+					</p>
+					<p>
+						<strong>matches</strong>: {{ t('mail', 'A pattern match using wildcards. The "*" symbol represents any number of characters (including none), while "?" represents exactly one character. For example, "*report*" would match "Business report 2024".') }}
+					</p>
+				</div>
 
 				<Test v-for="test in clone.tests"
 					:key="test.id"
@@ -189,4 +191,8 @@ export default {
 	padding-right: 14px;
 	white-space: nowrap;
 }
+
+.help-text p {
+	margin-bottom: 0.2em;
+}
 </style>