feat: make email wide on phone

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;

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);

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;

src/components/Message.vue

@@ -173,13 +173,22 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+@use '../../css/variables';
+
 .v-popover > .trigger > .action-item {
 	border-radius: 22px;
 	background-color: var(--color-background-darker);
 }
 
 .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;

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;
 	}

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 {

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) {

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>

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;
 	}
 }

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>

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;
 }