diff --git a/src/components/Imip.vue b/src/components/Imip.vue
index 917b682c10..4f82989f47 100644
--- a/src/components/Imip.vue
+++ b/src/components/Imip.vue
@@ -573,7 +573,7 @@ export default {
 	&__type {
 		display: flex;
 		gap: 5px;
-		margin-inline-start: 36px;
+		margin-inline-start: 8px;
 	}
 
 	&__more-options {
@@ -606,7 +606,7 @@ export default {
 
 	&__actions {
 		margin-top: 15px;
-		margin-inline-start: 36px;
+		margin-inline-start: 8px;
 
 		&--buttons {
 			display: flex;
diff --git a/src/components/Message.vue b/src/components/Message.vue
index 35f68dc47b..80508475f5 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -180,6 +180,13 @@ export default {
 
 .message-imip {
 	padding: 5px 10px;
+	margin-left: calc(var(--default-grid-baseline) * 11);
+}
+
+@media (max-width: 600px) {
+	.message-imip {
+		margin-left: 0;
+	}
 }
 
 .invalid-signature-warning {
@@ -201,7 +208,7 @@ export default {
 }
 
 .reply-buttons {
-	margin: 0 calc(var(--default-grid-baseline) * 4) calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 14);
+	margin: 5px calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 3) calc(var(--default-grid-baseline) * 14);
 	display: flex;
 	flex-wrap: wrap;
 	gap: 8px;
@@ -225,6 +232,11 @@ export default {
 	&__notsuggested {
 		margin-inline-start: auto;
 	}
+
+	@media (max-width: 600px) {
+        margin-left: calc(var(--default-grid-baseline) * 3);
+        margin-right: calc(var(--default-grid-baseline) * 3);
+    }
 }
 
 @media screen and (max-width: 600px) {
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index ebd9808c22..6891121218 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -287,12 +287,16 @@ export default {
 .mail-message-attachments {
 	display:flex;
 	flex-wrap: wrap;
-	padding: 10px 6px 10px 46px;
+	padding: 10px 12px 10px 46px;
 	margin-top: 4px;
 	margin-bottom: 0;
 	position:sticky;
-	bottom:0;
+	bottom: -2px;
 	background: linear-gradient(0deg, var(--color-main-background), var(--color-main-background) 90%, rgba(255, 255, 255, 0));
+
+	@media (max-width: 600px) {
+        padding: 10px 12px 10px 12px;
+    }
 }
 
 .mail-message-attachments--wrapper {
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index 1316337242..a54efeb8fa 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -190,21 +190,30 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-// account for 8px margin on iframe body
+// account for 12px (was 8) margin on iframe body
+// should be 12px so it maches the rest of the content
 .html-message-body {
-	margin : 2px calc(var(--default-grid-baseline) * 2) 0 calc(var(--default-grid-baseline) * 14);
+	margin : 2px calc(var(--default-grid-baseline) * 3) 0 calc(var(--default-grid-baseline) * 14);
 	background-color: #FFFFFF;
+	border-radius: var(--border-radius-element);
+
+	@media (max-width: 600px) {
+        margin-left: calc(var(--default-grid-baseline) * 3);
+        margin-right: calc(var(--default-grid-baseline) * 3);
+    }
 }
 
 #mail-message-has-blocked-content {
 	margin-inline-start: 10px;
-	color: var(--color-text-maxcontrast) !important;
+	color: #000000 !important;
+	padding-top: 5px;
 }
 
 #message-container {
 	flex: 1;
 	display: flex;
 	background-color: #FFFFFF;
+	border-radius: var(--border-radius-element);
 
 	// TODO: collapse quoted text and remove inner scrollbar
 	@media only screen {
@@ -223,6 +232,7 @@ export default {
 
 .message-frame {
 	width: 100%;
+	border-radius: var(--border-radius-element);
 }
 
 :deep(.button-vue__icon) {
diff --git a/src/components/MessageLoadingSkeleton.vue b/src/components/MessageLoadingSkeleton.vue
index 4e741c7ae7..443a69eec2 100644
--- a/src/components/MessageLoadingSkeleton.vue
+++ b/src/components/MessageLoadingSkeleton.vue
@@ -99,4 +99,10 @@ export default {
 	 }
 }
 
+@media only screen and (max-width: 600px) {
+    .message-loading-skeleton__body {
+        margin-inline-start: 12px;
+    }
+}
+
 </style>
diff --git a/src/components/PhishingWarning.vue b/src/components/PhishingWarning.vue
index 6b69d9449e..f65bd09d36 100644
--- a/src/components/PhishingWarning.vue
+++ b/src/components/PhishingWarning.vue
@@ -70,14 +70,15 @@ export default {
 <style lang="scss" scoped>
 .phishing-warning {
 	background-color:rgba(var(--color-warning-rgb), 0.2);
-    border-radius: var(--border-radius);
-    text-align: start;
-    padding: 8px;
-    margin: calc(var(--default-grid-baseline) * 2);
+	border-radius: var(--border-radius-element);
+	text-align: start;
+	padding: 8px;
+	margin: calc(var(--default-grid-baseline) * 3);
 	// To match the html message margin
-	margin-inline-start: 50px;
+	margin-inline-start: calc(var(--default-grid-baseline) * 14);
 	&__title {
 		display: flex;
+		gap: 2px;
 	}
 	&__list {
 		list-style-position: inside;
@@ -86,11 +87,15 @@ export default {
 			word-wrap: break-word;
 		}
 	}
-    &__links {
-      margin-top: 10px;
+	&__links {
+		margin-top: 10px;
 		&__button{
 			margin-bottom: 10px;
 		}
-    }
+	}
+
+	@media (max-width: 600px) {
+		margin-inline-start: calc(var(--default-grid-baseline) * 3);
+	}
 }
 </style>
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index ef6edf6eb1..5547dd521a 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -13,7 +13,7 @@
 		<template v-else>
 			<div id="mail-thread-header">
 				<div id="mail-thread-header-fields">
-					<h2 dir="auto" :title="threadSubject">
+					<h2 ref="mailThreadHeaderH2" dir="auto" :title="threadSubject" :class="{ 'text-collapsed': isTextCollapsed }">
 						{{ threadSubject }}
 					</h2>
 					<div v-if="thread.length" ref="avatarHeader" class="avatar-header">
@@ -119,6 +119,15 @@ export default {
 			summaryText: '',
 			summaryError: false,
 			loadedThreads: 0,
+			isTextCollapsed: false,
+			fullHeight: 0,
+			singleHeight: 0,
+			threshold: 0,
+			// pixel hysteresis to prevent toggling when scroll is near the threshold
+			hysteresis: 0,
+			scrollEl: null,
+			transitionEndHandler: null,
+			isAnimating: false,
 		}
 	},
 
@@ -219,9 +228,30 @@ export default {
 		window.addEventListener('keydown', this.handleKeyDown)
 	},
 
+	mounted() {
+		this.scrollEl = this.$el.closest('.app-content-wrapper') || window
+		this.$nextTick(() => {
+			if (document.fonts && document.fonts.ready) {
+				document.fonts.ready.then(() => this._measureHeightsOnce())
+					.catch(() => this._measureHeightsOnce())
+			} else {
+				this._measureHeightsOnce()
+			}
+		})
+		this.scrollEl.addEventListener('scroll', this.onScroll, { passive: true })
+	},
+
 	beforeDestroy() {
 		window.removeEventListener('resize', this.resizeDebounced)
 		window.removeEventListener('keydown', this.handleKeyDown)
+		this.scrollEl?.removeEventListener('scroll', this.onScroll)
+		if (this.transitionEndHandler) {
+			const h2 = this.$refs.mailThreadHeaderH2
+			if (h2) {
+				h2.removeEventListener('transitionend', this.transitionEndHandler)
+			}
+			this.transitionEndHandler = null
+		}
 	},
 
 	methods: {
@@ -242,6 +272,169 @@ export default {
 			}
 		},
 
+		_measureHeightsOnce() {
+			const h2 = this.$refs.mailThreadHeaderH2
+			if (!h2) {
+				return
+			}
+
+			const clone = h2.cloneNode(true)
+			Object.assign(clone.style, {
+				position: 'absolute',
+				visibility: 'hidden',
+				whiteSpace: 'normal',
+				width: `${h2.offsetWidth}px`,
+				pointerEvents: 'none',
+				overflow: 'visible',
+				top: '0',
+				left: '-9999px',
+			})
+			document.body.appendChild(clone)
+			const full = clone.scrollHeight
+
+			clone.style.whiteSpace = 'nowrap'
+			const single = clone.scrollHeight
+			document.body.removeChild(clone)
+
+			this.fullHeight = full
+			this.singleHeight = single
+
+			this.threshold = Math.max(0, this.fullHeight - this.singleHeight)
+			this.hysteresis = Math.max(10, Math.round(this.singleHeight * 0.6))
+
+			this.onScroll()
+		},
+
+		onScroll() {
+			if (this.isAnimating) {
+				return
+			}
+
+			let scrolled = 0
+			if (this.scrollEl === window) {
+				scrolled = window.pageYOffset || document.documentElement.scrollTop || 0
+			} else {
+				scrolled = this.scrollEl.scrollTop
+			}
+
+			// Use hysteresis: only collapse when scrolled > threshold + hysteresis,
+			// and only expand when scrolled < threshold - hysteresis.
+			const collapsePoint = this.threshold + this.hysteresis
+			const expandPoint = Math.max(0, this.threshold - this.hysteresis)
+
+			// Determine desired collapsed state. If scrolled is within the
+			// hysteresis band, keep current state (no toggle).
+			let desiredCollapsed = this.isTextCollapsed
+			if (scrolled > collapsePoint) {
+				desiredCollapsed = true
+			} else if (scrolled < expandPoint) {
+				desiredCollapsed = false
+			} else {
+				// inside hysteresis band -> don't change
+				return
+			}
+
+			if (desiredCollapsed === this.isTextCollapsed) {
+				return
+			}
+
+			if (desiredCollapsed) {
+				this._animateCollapse()
+			} else {
+				this._animateExpand()
+			}
+		},
+
+		_animateCollapse() {
+			const h2 = this.$refs.mailThreadHeaderH2
+			if (!h2) {
+				return
+			}
+			if (this.isAnimating) {
+				return
+			}
+
+			if (this.transitionEndHandler) {
+				h2.removeEventListener('transitionend', this.transitionEndHandler)
+				this.transitionEndHandler = null
+			}
+
+			this.isAnimating = true
+
+			h2.classList.remove('text-collapsed')
+			h2.style.overflow = 'hidden'
+			h2.style.height = `${this.fullHeight}px`
+
+			// force reflow
+			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+			h2.offsetHeight
+
+			h2.style.height = `${this.singleHeight}px`
+
+			const onEnd = (ev) => {
+				if (ev.propertyName !== 'height') {
+					return
+				}
+				h2.removeEventListener('transitionend', onEnd)
+				this.transitionEndHandler = null
+
+				this.isTextCollapsed = true
+				h2.classList.add('text-collapsed')
+
+				h2.style.height = ''
+				h2.style.overflow = ''
+				this.isAnimating = false
+			}
+
+			this.transitionEndHandler = onEnd
+			h2.addEventListener('transitionend', onEnd)
+		},
+
+		_animateExpand() {
+			const h2 = this.$refs.mailThreadHeaderH2
+			if (!h2) {
+				return
+			}
+			if (this.isAnimating) {
+				return
+			}
+
+			if (this.transitionEndHandler) {
+				h2.removeEventListener('transitionend', this.transitionEndHandler)
+				this.transitionEndHandler = null
+			}
+
+			this.isAnimating = true
+
+			h2.style.height = `${this.singleHeight}px`
+			h2.style.overflow = 'hidden'
+
+			h2.classList.remove('text-collapsed')
+
+			// force reflow
+			// eslint-disable-next-line @typescript-eslint/no-unused-expressions
+			h2.offsetHeight
+
+			h2.style.height = `${this.fullHeight}px`
+
+			const onEnd = (ev) => {
+				if (ev.propertyName !== 'height') {
+					return
+				}
+
+				h2.removeEventListener('transitionend', onEnd)
+				this.transitionEndHandler = null
+
+				this.isTextCollapsed = false
+				h2.style.height = ''
+				h2.style.overflow = ''
+				this.isAnimating = false
+			}
+
+			this.transitionEndHandler = onEnd
+			h2.addEventListener('transitionend', onEnd)
+		},
+
 		updateParticipantsToDisplay() {
 			// Wait until everything is in place
 			if (!this.$refs.avatarHeader || !this.threadParticipants) {
@@ -581,7 +774,6 @@ export default {
 
 <style lang="scss">
 #mail-message {
-	margin-bottom: 30vh;
 	width: 100%;
 	max-width: 100%;
 
@@ -594,8 +786,9 @@ export default {
 
 .mail-message-body {
 	flex: 1;
-	margin-bottom: calc(var(--default-grid-baseline) * 2);
+	margin-bottom: 0;
 	position: relative;
+	border-radius: 5px;
 }
 
 #mail-thread-header {
@@ -631,6 +824,13 @@ export default {
 	}
 }
 
+@media only screen and (max-width: 1024px) {
+    #mail-thread-header {
+        position: sticky !important;
+        top: 29px !important;
+    }
+}
+
 #mail-thread-header-fields {
 	// initial width
 	width: 0;
@@ -639,6 +839,7 @@ export default {
 	padding-inline-start: 66px;
 	// grow and try to fill 100%
 	flex: 1 1 auto;
+	background: var(--color-main-background);
 	h2,
 	p {
 		padding-bottom: calc(var(--default-grid-baseline) * 2);
@@ -647,6 +848,22 @@ export default {
 		margin-top: var(--default-grid-baseline);
 	}
 
+	h2 {
+		white-space: normal;
+		overflow: visible;
+		text-overflow: clip;
+		margin-right: calc(var(--default-grid-baseline) * 2);
+
+		transition: height 250ms ease;
+		will-change: height;
+	}
+
+	h2.text-collapsed {
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
 	p {
 		white-space: nowrap;
 		overflow: hidden;
@@ -659,9 +876,14 @@ export default {
 		}
 	}
 }
+@media only screen and (max-width: 600px) {
+    #mail-thread-header-fields {
+        padding-inline-start: 48px;
+    }
+}
 @media only screen and (max-width: 1024px) {
 	#mail-thread-header-fields {
-		margin-top: -20px;
+		margin-top: -32px;
 	}
 }
 
@@ -679,6 +901,12 @@ export default {
 	margin: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 10) 0 calc(var(--default-grid-baseline) * 14);
 }
 
+@media only screen and (max-width: 600px) {
+    #mail-content {
+        margin: calc(var(--default-grid-baseline) * 2) calc(var(--default-grid-baseline) * 3) 0 calc(var(--default-grid-baseline) * 3);
+    }
+}
+
 #mail-content iframe {
 	width: 100%;
 }
@@ -723,9 +951,10 @@ export default {
 }
 
 .avatar-more {
-	display: inline;
+	display: flex;
 	background-color: var(--color-background-dark);
 	border-radius: var(--border-radius-large);
+	align-items: center;
 	cursor: pointer;
 }
 
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
index b65838446b..80dd8a0a8b 100644
--- a/src/components/ThreadEnvelope.vue
+++ b/src/components/ThreadEnvelope.vue
@@ -490,6 +490,11 @@ export default {
 			const { envelope } = this.$refs
 			const envelopeWidth = (envelope && envelope.clientWidth) || 250
 			const spaceToFill = envelopeWidth - 500 + this.recomputeMenuSize
+
+			if (envelopeWidth < 400) {
+				return 0
+			}
+
 			return Math.floor(spaceToFill / 44)
 		},
 
@@ -1111,7 +1116,6 @@ export default {
 			text-overflow: ellipsis;
 			overflow: hidden;
 		}
-
 	}
 
 	.right {
@@ -1295,6 +1299,38 @@ export default {
 		font-weight: bold;
 	}
 
+	.envelope__header {
+		display: flex;
+		align-items: center;
+
+		.left {
+			display: flex;
+			align-items: center;
+			min-width: 0;
+			flex: 1 1 auto;
+			gap: 8px;
+		}
+
+		.envelope__header__left__sender-subject-tags {
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.envelope__header__left__unsubscribe {
+			flex-shrink: 0;
+		}
+
+		.right {
+			flex-shrink: 0;
+			margin-left: auto;
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
+	}
+
 	.tag-group__label {
 		margin: 0 calc(var(--default-grid-baseline) * 2);
 		z-index: 2;
@@ -1339,11 +1375,5 @@ export default {
 		display: inline;
 		align-items: center;
 	}
-	@media only screen and (max-width: 400px) {
-		.sender {
-			text-overflow: ellipsis;
-			overflow: hidden;
-			width: 180px;
-		}
-	}
+
 </style>
diff --git a/src/components/imip/EventData.vue b/src/components/imip/EventData.vue
index c2a640e335..0a3c14c67e 100644
--- a/src/components/imip/EventData.vue
+++ b/src/components/imip/EventData.vue
@@ -191,7 +191,7 @@ export default {
 	gap: 5px;
 
 	&__heading {
-		margin-inline-start: 36px;
+		margin-inline-start: 8px;
 	}
 
 	&__row {