Make sender to be centered with the avatar and timestamps

Signed-off-by: greta <gretadoci@gmail.com>

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>