enh: make email wide on phone

A few changes, mainly focused on making email fully wide on phone, and a few design changes.

Author: CreatorOfBiontium

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

@@ -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,9 +232,14 @@ export default {
 	&__notsuggested {
 		margin-inline-start: auto;
 	}
+
+	@media (max-width: var(--breakpoint-mobile)) {
+        margin-left: calc(var(--default-grid-baseline) * 3);
+        margin-right: calc(var(--default-grid-baseline) * 3);
+    }
 }
 
-@media screen and (max-width: 600px) {
+@media screen and (max-width: var(--breakpoint-mobile)) {
 	.reply-buttons {
 		display: flex;
 		flex-wrap: wrap;

src/components/MessageAttachments.vue

@@ -287,12 +287,17 @@ 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: var(--breakpoint-mobile)) {
+        padding: 10px 12px 10px 12px;
+    }
 }
 
 .mail-message-attachments--wrapper {

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

src/components/MessageLoadingSkeleton.vue

@@ -99,4 +99,11 @@ export default {
 	 }
 }
 
+@media only screen and (max-width: 1024px) {
+    .message-loading-skeleton__body {
+        margin-inline-start: 12px;
+    }
+}
+
+
 </style>

src/components/PhishingWarning.vue

@@ -69,15 +69,16 @@ 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);
+	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 +87,15 @@ export default {
 			word-wrap: break-word;
 		}
 	}
-    &__links {
-      margin-top: 10px;
+	&__links {
+		margin-top: 10px;
 		&__button{
 			margin-bottom: 10px;
 		}
     }
+
+	@media (max-width: 1024px) {
+		margin-inline-start: calc(var(--default-grid-baseline) * 3);
+	}
 }
 </style>

src/components/Thread.vue

@@ -581,7 +581,6 @@ export default {
 
 <style lang="scss">
 #mail-message {
-	margin-bottom: 30vh;
 	width: 100%;
 	max-width: 100%;
 
@@ -594,8 +593,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 +631,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 +646,8 @@ export default {
 	padding-inline-start: 66px;
 	// grow and try to fill 100%
 	flex: 1 1 auto;
+	background: var(--color-main-background);
+	margin-right: 5px;
 	h2,
 	p {
 		padding-bottom: calc(var(--default-grid-baseline) * 2);
@@ -659,9 +668,16 @@ export default {
 		}
 	}
 }
+
+@media only screen and (max-width: 1024px) {
+    #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 +695,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: var(--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 +745,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;
 }
 

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)
 		},
 
@@ -1295,6 +1300,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 +1376,4 @@ export default {
 		display: inline;
 		align-items: center;
 	}
-	@media only screen and (max-width: 400px) {
-		.sender {
-			text-overflow: ellipsis;
-			overflow: hidden;
-			width: 180px;
-		}
-	}
 </style>

src/components/imip/EventData.vue

@@ -191,7 +191,7 @@ export default {
 	gap: 5px;
 
 	&__heading {
-		margin-inline-start: 36px;
+		margin-inline-start: 8px;
 	}
 
 	&__row {