diff --git a/frontend/src/components/misc/Modal.vue b/frontend/src/components/misc/Modal.vue
index ef24e2ca2..fcecc372d 100644
--- a/frontend/src/components/misc/Modal.vue
+++ b/frontend/src/components/misc/Modal.vue
@@ -34,7 +34,7 @@
 						}"
 					>
 						<slot>
-							<div class="header">
+							<div class="modal-header">
 								<slot name="header" />
 							</div>
 							<div class="content">
@@ -140,7 +140,7 @@ $modal-width: 1024px;
 		transform: none;
 	}
 
-	.header {
+	.modal-header {
 		font-size: 2rem;
 		font-weight: 700;
 	}
@@ -241,6 +241,14 @@ $modal-width: 1024px;
 	margin-bottom: 0 !important;
   }
 }
+
+.modal-content:has(.modal-header) {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	padding: 0 1rem;
+	min-height: 100vh
+}
 </style>
 
 <style lang="scss">
diff --git a/frontend/src/views/tasks/TaskDetailView.vue b/frontend/src/views/tasks/TaskDetailView.vue
index b7d4de656..432704894 100644
--- a/frontend/src/views/tasks/TaskDetailView.vue
+++ b/frontend/src/views/tasks/TaskDetailView.vue
@@ -573,8 +573,10 @@
 			</template>
 
 			<template #text>
-				<p>
-					{{ $t('task.detail.delete.text1') }}<br>
+				<p class="tw-text-balance !tw-mb-0">
+					{{ $t('task.detail.delete.text1') }}
+				</p>
+				<p class="tw-text-balance">
 					{{ $t('task.detail.delete.text2') }}
 				</p>
 			</template>