From a1fd9c3ae5a53870fd5d899f4a1e2f413d7a3718 Mon Sep 17 00:00:00 2001
From: greta <gretadoci@gmail.com>
Date: Wed, 8 Jun 2022 13:05:35 +0200
Subject: Make sender to be centered with the avatar and timestamps

Signed-off-by: greta <gretadoci@gmail.com>
---
 src/components/ThreadEnvelope.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 7bbe08311..c10ae0cd1 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -51,7 +51,8 @@
 				class="left"
 				:class="{seen: envelope.flags.seen}"
 				@click.native.prevent="$emit('toggleExpand', $event)">
-				<div class="sender">
+				<div class="sender"
+					:class="{ 'centered-sender': centeredSender }">
 					{{ envelope.from && envelope.from[0] ? envelope.from[0].label : '' }}
 				</div>
 				<div v-if="hasChangedSubject" class="subject">
@@ -198,6 +199,9 @@ export default {
 		cleanSubject() {
 			return this.envelope.subject.replace(/((?:[\t ]*(?:R|RE|F|FW|FWD):[\t ]*)*)/i, '')
 		},
+		centeredSender() {
+			  return (!this.hasChangedSubject || this.cleanSubject.length === 0) && this.tags.length === 0
+		},
 	},
 	watch: {
 		expanded(expanded) {
@@ -298,6 +302,9 @@ export default {
 	.sender {
 		margin-left: 8px;
 	}
+	.centered-sender {
+		margin-top: 8px;
+	}
 
 	.right {
 		display: flex;
@@ -442,4 +449,5 @@ export default {
 	.envelope--header.list-item-style {
 		border-radius: 16px;
 	}
+
 </style>
-- 
cgit v1.2.3