diff --git a/css/variables.scss b/css/variables.scss
new file mode 100644
index 0000000000..29ca80ad89
--- /dev/null
+++ b/css/variables.scss
@@ -0,0 +1,6 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-only
+ */
+
+$breakpoint-mobile: 1024px;
diff --git a/src/components/ComposerSessionIndicator.vue b/src/components/ComposerSessionIndicator.vue
index 813c4c40a0..5e9faf8b28 100644
--- a/src/components/ComposerSessionIndicator.vue
+++ b/src/components/ComposerSessionIndicator.vue
@@ -97,6 +97,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../css/variables';
+
 .composer-session {
 	position: fixed;
 	bottom: calc(var(--body-container-margin) + var(--default-grid-baseline));
@@ -114,7 +116,7 @@ export default {
 	border-radius: var(--body-container-radius);
 
 	// Mobile
-	@media (max-width: 1024px) {
+	@media (max-width: #{variables.$breakpoint-mobile}) {
 		width: calc(100% - 2 * var(--default-grid-baseline));
 		height: 44px;
 		border-radius: var(--border-radius-pill);
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..75b5242ed4 100644
--- a/src/components/Message.vue
+++ b/src/components/Message.vue
@@ -173,6 +173,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../css/variables';
+
 .v-popover > .trigger > .action-item {
 	border-radius: 22px;
 	background-color: var(--color-background-darker);
@@ -180,6 +182,13 @@ export default {
 
 .message-imip {
 	padding: 5px 10px;
+	margin-inline-start: calc(var(--default-grid-baseline) * 11);
+}
+
+@media (max-width: 600px) {
+	.message-imip {
+		margin-inline-start: 0;
+	}
 }
 
 .invalid-signature-warning {
@@ -201,7 +210,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,9 +234,13 @@ export default {
 	&__notsuggested {
 		margin-inline-start: auto;
 	}
+
+	@media (max-width: #{variables.$breakpoint-mobile}) {
+        margin-inline: calc(var(--default-grid-baseline) * 3);
+    }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: #{variables.$breakpoint-mobile}) {
 	.reply-buttons {
 		display: flex;
 		flex-wrap: wrap;
diff --git a/src/components/MessageAttachment.vue b/src/components/MessageAttachment.vue
index 04552378ad..38517615c2 100644
--- a/src/components/MessageAttachment.vue
+++ b/src/components/MessageAttachment.vue
@@ -260,8 +260,9 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../css/variables';
 
-@media screen and (max-width: 1024px) {
+@media screen and (max-width: #{variables.$breakpoint-mobile}) {
 	.attachment{
 		width: 100% !important;
 	}
diff --git a/src/components/MessageAttachments.vue b/src/components/MessageAttachments.vue
index ebd9808c22..6ba80a83f1 100644
--- a/src/components/MessageAttachments.vue
+++ b/src/components/MessageAttachments.vue
@@ -216,6 +216,8 @@ export default {
 </script>
 
 <style lang="scss">
+@use '../../css/variables';
+
 .attachments {
 	width: 100%;
     box-sizing: border-box;
@@ -287,12 +289,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;
+	position: sticky;
+	bottom: -2px;
 	background: linear-gradient(0deg, var(--color-main-background), var(--color-main-background) 90%, rgba(255, 255, 255, 0));
+
+	@media (max-width: #{variables.$breakpoint-mobile}) {
+        padding: 10px 12px 10px 12px;
+    }
 }
 
 .mail-message-attachments--wrapper {
diff --git a/src/components/MessageHTMLBody.vue b/src/components/MessageHTMLBody.vue
index 1316337242..c4e5239979 100644
--- a/src/components/MessageHTMLBody.vue
+++ b/src/components/MessageHTMLBody.vue
@@ -190,21 +190,29 @@ 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-inline: calc(var(--default-grid-baseline) * 3);
+    }
 }
 
 #mail-message-has-blocked-content {
 	margin-inline-start: 10px;
 	color: var(--color-text-maxcontrast) !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 +231,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..4cc2578ea4 100644
--- a/src/components/MessageLoadingSkeleton.vue
+++ b/src/components/MessageLoadingSkeleton.vue
@@ -35,6 +35,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../css/variables';
 
 /* skeleton */
 .message-loading-skeleton {
@@ -99,4 +100,10 @@ export default {
 	 }
 }
 
+@media only screen and (max-width: #{variables.$breakpoint-mobile}) {
+    .message-loading-skeleton__body {
+        margin-inline-start: 12px;
+    }
+}
+
 </style>
diff --git a/src/components/NewMessageModal.vue b/src/components/NewMessageModal.vue
index d717be3cac..8ad7c7b1e0 100644
--- a/src/components/NewMessageModal.vue
+++ b/src/components/NewMessageModal.vue
@@ -643,6 +643,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../css/variables';
+
 @media only screen and (max-width: 600px) {
 	:deep(.modal-container) {
 		max-width: 80%;
@@ -695,7 +697,7 @@ export default {
 	overflow-y: auto;
 	padding-inline-start: 5px;
 	border-inline-start: 1px solid var(--color-text-maxcontrast);
-	@media (max-width: 1024px) {
+	@media (max-width: #{variables.$breakpoint-mobile}) {
 		display: none;
 	}
 }
diff --git a/src/components/PhishingWarning.vue b/src/components/PhishingWarning.vue
index 6b69d9449e..bf5f36fe8b 100644
--- a/src/components/PhishingWarning.vue
+++ b/src/components/PhishingWarning.vue
@@ -68,16 +68,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../css/variables';
+
 .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);
+	background-color: rgba(var(--color-warning-rgb), 0.2);
+	border-radius: var(--border-radius-element);
+	text-align: start;
+	padding: 8px;
+	margin: calc(var(--default-grid-baseline) * 2);
 	// 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 +89,15 @@ export default {
 			word-wrap: break-word;
 		}
 	}
-    &__links {
-      margin-top: 10px;
+	&__links {
+		margin-top: 10px;
 		&__button{
 			margin-bottom: 10px;
 		}
     }
+
+	@media (max-width: #{variables.$breakpoint-mobile}) {
+		margin-inline-start: calc(var(--default-grid-baseline) * 3);
+	}
 }
 </style>
diff --git a/src/components/Thread.vue b/src/components/Thread.vue
index ef6edf6eb1..3ff77cacbc 100644
--- a/src/components/Thread.vue
+++ b/src/components/Thread.vue
@@ -580,8 +580,9 @@ export default {
 </script>
 
 <style lang="scss">
+@use '../../css/variables';
+
 #mail-message {
-	margin-bottom: 30vh;
 	width: 100%;
 	max-width: 100%;
 
@@ -594,8 +595,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 +633,13 @@ export default {
 	}
 }
 
+@media only screen and (max-width: #{variables.$breakpoint-mobile}) {
+    #mail-thread-header {
+        position: sticky !important;
+        top: 29px !important;
+    }
+}
+
 #mail-thread-header-fields {
 	// initial width
 	width: 0;
@@ -639,6 +648,8 @@ export default {
 	padding-inline-start: 66px;
 	// grow and try to fill 100%
 	flex: 1 1 auto;
+	background: var(--color-main-background);
+	margin-inline-end: 5px;
 	h2,
 	p {
 		padding-bottom: calc(var(--default-grid-baseline) * 2);
@@ -659,9 +670,16 @@ export default {
 		}
 	}
 }
-@media only screen and (max-width: 1024px) {
+
+@media only screen and (max-width: #{variables.$breakpoint-mobile}) {
+    #mail-thread-header-fields {
+        padding-inline-start: 48px;
+    }
+}
+
+@media only screen and (max-width: #{variables.$breakpoint-mobile}) {
 	#mail-thread-header-fields {
-		margin-top: -20px;
+		margin-top: -32px;
 	}
 }
 
@@ -679,6 +697,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: #{variables.$breakpoint-mobile}) {
+    #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 +747,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..f6660845c5 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)
 		},
 
@@ -1201,6 +1206,30 @@ export default {
 			border-radius: var(--border-radius);
 			min-height: 68px; /* prevents jumping between open/collapsed */
 
+			.left {
+				display: flex;
+				align-items: center;
+				min-width: 0;
+				flex: 1 1 auto;
+				gap: 8px;
+
+				.envelope__header__left__sender-subject-tags {
+					min-width: 0;
+					width: 100%;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+				}
+			}
+
+			.right {
+				flex-shrink: 0;
+				margin-inline-start: auto;
+				display: flex;
+				align-items: center;
+				gap: 4px;
+			}
+
 			&__avatar {
 				position: relative;
 
@@ -1260,12 +1289,9 @@ export default {
 			}
 
 			&__unsubscribe {
+				flex-shrink: 0;
 				color: var(--color-text-maxcontrast);
 			}
-			&__left__sender-subject-tags {
-				white-space: nowrap;
-				width: 100%;
-			}
 		}
 
 		.subline {
@@ -1339,11 +1365,4 @@ 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 {