Merge pull request #7179 from nextcloud/fix/thread-message-alignment

Fix element alignment of thread message and event invites

5 files changed, 14 insertions, 18 deletions

diff --git a/src/components/Imip.vue b/src/components/Imip.vue
index 252e30bb3..a60d6e2b9 100644
--- a/src/components/Imip.vue
+++ b/src/components/Imip.vue
@@ -171,6 +171,7 @@ export default {
 	&__type {
 		display: flex;
 		gap: 5px;
+		margin-left: 36px;
 	}
 
 	&__actions {
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index f91f79956..e4f6b5827 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -158,7 +158,7 @@ export default {
 <style lang="scss" scoped>
 // account for 8px margin on iframe body
 #mail-content {
-	margin-left: 48px;
+	margin-left: 50px;
 	margin-top: 2px;
 	display: flex;
 	flex-direction: column;
@@ -166,7 +166,7 @@ export default {
 	background-color: #FFFFFF;
 }
 #mail-message-has-blocked-content {
-	margin-left: 8px;
+	margin-left: 10px;
 	color: var(--color-text-maxcontrast) !important;
 }
 
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index c0ab3410f..272c6c486 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -301,7 +301,7 @@ export default {
 #mail-thread-header-fields {
 	// initial width
 	width: 0;
-	padding-left: 60px;
+	padding-left: 70px;
 	// grow and try to fill 100%
 	flex: 1 1 auto;
 	h2,
@@ -332,7 +332,7 @@ export default {
 }
 
 #mail-content {
-	margin: 10px 38px 0 60px;
+	margin: 10px 38px 0 59px;
 }
 
 #mail-content iframe {
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index 423008e5e..0e215bd67 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -57,8 +57,7 @@
 				class="left"
 				:class="{seen: envelope.flags.seen}"
 				@click.native.prevent="$emit('toggle-expand', $event)">
-				<div class="sender"
-					:class="{ 'centered-sender': centeredSender }">
+				<div class="sender">
 					{{ envelope.from && envelope.from[0] ? envelope.from[0].label : '' }}
 				</div>
 				<div v-if="showSubline" class="subline">
@@ -266,9 +265,6 @@ export default {
 		showSubline() {
 			return !this.expanded && !!this.envelope.previewText
 		},
-		centeredSender() {
-			  return !this.showSubline && this.tags.length === 0
-		},
 		junkFavoritePosition() {
 			return this.showSubline && this.tags.length > 0
 		},
@@ -411,9 +407,6 @@ export default {
 	.sender {
 		margin-left: 8px;
 	}
-	.centered-sender {
-		margin-top: 8px;
-	}
 
 	.right {
 		display: flex;
@@ -447,10 +440,6 @@ export default {
 			}
 		}
 	}
-	.avatardiv {
-		display: inline-block;
-		margin-bottom: -23px;
-	}
 	.subline {
 		margin-left: 8px;
 		color: var(--color-text-maxcontrast);
@@ -483,8 +472,10 @@ export default {
 	.envelope--header {
 		position: relative;
 		display: flex;
+		align-items: center;
 		padding: 10px;
 		border-radius: var(--border-radius);
+		min-height: 68px; /* prevents jumping between open/collapsed */
 	}
 	.left {
 		flex-grow: 1;
diff --git a/src/components/imip/EventData.vue b/src/components/imip/EventData.vue
index 86907e5de..ab5afe0c3 100644
--- a/src/components/imip/EventData.vue
+++ b/src/components/imip/EventData.vue
@@ -22,7 +22,7 @@
 
 <template>
 	<div class="event-data">
-		<h2>{{ title }}</h2>
+		<h2 class="event-data__heading">{{ title }}</h2>
 
 		<div class="event-data__row event-data__row--date">
 			<CalendarIcon class="event-data__row__icon" :size="20" />
@@ -202,12 +202,16 @@ export default {
 	flex-direction: column;
 	gap: 5px;
 
+	&__heading {
+		margin-left: 36px;
+	}
+
 	&__row {
 		display: flex;
 
 		&__icon {
 			align-self: start;
-			margin: 0 10px;
+			margin: 0 8px;
 
 			// Fix slight misalignment caused by align-self: start
 			padding-top: 2px;