From 33c9ea802a69f81a8685471665bf5079da8d03c9 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 29 Sep 2024 13:47:35 +0200
Subject: [PATCH] fix(task): improve task delete modal on mobile

(cherry picked from commit 9f9b00144b8175defbddd14422cae9af4d65af54)
---
 frontend/src/components/misc/Modal.vue      | 12 ++++++++++--
 frontend/src/views/tasks/TaskDetailView.vue |  6 ++++--
 2 files changed, 14 insertions(+), 4 deletions(-)

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>