diff --git a/src/components/Loading.vue b/src/components/Loading.vue
index cefefd809a..9b2544cff5 100644
--- a/src/components/Loading.vue
+++ b/src/components/Loading.vue
@@ -11,9 +11,11 @@
 			<template #icon>
 				<IconLoading />
 			</template>
-			<transition name="fade">
-				<em v-if="slowHint && slow">{{ slowHint }}</em>
-			</transition>
+			<template #description>
+				<transition name="fade">
+					<em v-if="slowHint && slow">{{ slowHint }}</em>
+				</transition>
+			</template>
 		</EmptyContent>
 		<IconLoading v-else class="container" />
 	</div>
@@ -85,6 +87,6 @@ export default {
 	flex-direction: column;
 	flex: 1 auto;
 	align-items: center;
-	height: 100vh;
+	height: 100%;
 }
 </style>
diff --git a/src/components/Mailbox.vue b/src/components/Mailbox.vue
index 01c957e455..de2d3eca13 100644
--- a/src/components/Mailbox.vue
+++ b/src/components/Mailbox.vue
@@ -4,7 +4,8 @@
 -->
 
 <template>
-	<div :class="{ 'empty-content': (!hasMessages && !loadingEnvelopes) || error }">
+	<div class="mailbox"
+		:class="{ 'empty-content': (!hasMessages && !loadingEnvelopes) || error }">
 		<Error
 			v-if="error"
 			:error="t('mail', 'Could not open folder')"
@@ -625,6 +626,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.mailbox {
+	height: 100%;
+}
+
 // Fix vertical space between sections in priority inbox
 .nameimportant {
 	:deep(#load-more-mail-messages) {