From 1f4c7942d4e163652a59aa8e955d746950e29023 Mon Sep 17 00:00:00 2001
From: Richard Steinmetz <richard@steinmetz.cloud>
Date: Tue, 26 Apr 2022 12:45:08 +0200
Subject: [PATCH] Fix alignment of mailbox loading indicator

Signed-off-by: Richard Steinmetz <richard@steinmetz.cloud>
---
 src/components/Loading.vue       | 23 ++++++++++++++++-------
 src/components/MailboxThread.vue |  5 +++++
 2 files changed, 21 insertions(+), 7 deletions(-)

diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index a8e7663d37..6aaaa4a00a 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -1,12 +1,14 @@
 <template>
-	<div v-if="hint" class="emptycontent">
-		<a class="icon-loading" />
-		<h2>{{ hint }}</h2>
-		<transition name="fade">
-			<em v-if="slowHint && slow">{{ slowHint }}</em>
-		</transition>
+	<div class="wrapper">
+		<div v-if="hint" class="emptycontent">
+			<a class="icon-loading" />
+			<h2>{{ hint }}</h2>
+			<transition name="fade">
+				<em v-if="slowHint && slow">{{ slowHint }}</em>
+			</transition>
+		</div>
+		<div v-else class="container icon-loading" />
 	</div>
-	<div v-else class="container icon-loading" />
 </template>
 
 <script>
@@ -52,4 +54,11 @@ export default {
 .fade-leave-to {
 	opacity: 0;
 }
+
+.wrapper {
+	display: flex;
+	justify-content: space-around;
+	flex-direction: column;
+	flex: 1 auto;
+}
 </style>
diff --git a/src/components/MailboxThread.vue b/src/components/MailboxThread.vue
index 9b88418ec1..e6886888ae 100644
--- a/src/components/MailboxThread.vue
+++ b/src/components/MailboxThread.vue
@@ -238,6 +238,11 @@ export default {
 	padding: 16px;
 }
 
+.app-content-list {
+	// Required for centering the loading indicator
+	display: flex;
+}
+
 .app-content-list-item:hover {
 	background: transparent;
 }