fix: fullsize email content under 600px

Make the email content full screen wide, when screen < 600 px. And a few other fixes
Signed-off-by: Tobiáš Vašťák <[email protected]>

Author: CreatorOfBiontium

src/components/Message.vue

@@ -206,7 +206,7 @@ export default {
 		margin-inline-start: auto;
 	}
 
-	@media (max-width: 500px) {
+	@media (max-width: 600px) {
         margin-left: calc(var(--default-grid-baseline) * 3);
         margin-right: calc(var(--default-grid-baseline) * 3);
     }

src/components/MessageAttachments.vue

@@ -279,7 +279,7 @@ export default {
 	bottom:0;
 	background: linear-gradient(0deg, var(--color-main-background), var(--color-main-background) 90%, rgba(255, 255, 255, 0));
 
-	@media (max-width: 500px) {
+	@media (max-width: 600px) {
         padding: 10px 12px 10px 12px;
     }
 }

src/components/MessageHTMLBody.vue

@@ -176,24 +176,25 @@ export default {
 .html-message-body {
 	margin : 2px calc(var(--default-grid-baseline) * 3) 0 calc(var(--default-grid-baseline) * 14);
 	background-color: #FFFFFF;
-	border-radius: 5px;
+	border-radius: var(--border-radius-element);
 
-	@media (max-width: 500px) {
+	@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: 5px;
+	border-radius: var(--border-radius-element);
 
 	// TODO: collapse quoted text and remove inner scrollbar
 	@media only screen {
@@ -212,7 +213,7 @@ export default {
 
 .message-frame {
 	width: 100%;
-	border-radius: 5px;
+	border-radius: var(--border-radius-element);
 }
 
 :deep(.button-vue__icon) {

src/components/PhishingWarning.vue

@@ -64,14 +64,15 @@ export default {
 <style lang="scss" scoped>
 .phishing-warning {
 	background-color:rgba(var(--color-warning-rgb), 0.2);
-	border-radius: var(--border-radius);
+	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: calc(var(--default-grid-baseline) * 14);
 	&__title {
 		display: flex;
+		gap: 2px;
 	}
 	&__list {
 		list-style-position: inside;
@@ -87,7 +88,7 @@ export default {
 		}
 	}
 
-	@media (max-width: 500px) {
+	@media (max-width: 600px) {
 		margin-inline-start: calc(var(--default-grid-baseline) * 3);
 	}
 }

src/components/Thread.vue

@@ -236,7 +236,7 @@ export default {
 			this.$nextTick(() => {
 				const header = this.$el.querySelector('#mail-thread-header')
 				if (header) {
-					const offset = -header.offsetHeight + 52
+					const offset = -header.offsetHeight + 51
 					document.documentElement.style.setProperty('--mail-thread-header-offset', `${offset}px`)
 				}
 			})
@@ -619,7 +619,7 @@ export default {
 	}
 }
 
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: 1024px) {
     #mail-thread-header {
         position: sticky !important;
         top: var(--mail-thread-header-offset, -25px) !important;;
@@ -654,7 +654,7 @@ export default {
 		}
 	}
 }
-@media only screen and (max-width: 500px) {
+@media only screen and (max-width: 600px) {
     #mail-thread-header-fields {
         padding-inline-start: 48px;
     }
@@ -679,7 +679,7 @@ 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: 500px) {
+@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);
     }
@@ -729,9 +729,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

@@ -438,6 +438,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)
 		},
 		account() {
@@ -998,7 +1003,6 @@ export default {
 			text-overflow: ellipsis;
 			overflow: hidden;
 		}
-
 	}
 
 	.right {
@@ -1182,6 +1186,39 @@ export default {
 		font-weight: bold;
 	}
 
+	.envelope__header {
+		display: flex;
+		align-items: center;
+
+		.left {
+			display: flex;
+			align-items: center;
+			min-width: 0;     /* umožní textu správně zkrátit */
+			flex: 1 1 auto;  /* roztáhne se co to jde */
+			gap: 8px;        /* mezera mezi textem a unsubscribe */
+		}
+
+		.envelope__header__left__sender-subject-tags {
+			min-width: 0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
+		.envelope__header__left__unsubscribe {
+			flex-shrink: 0;   /* aby se nikdy nezmenšovalo */
+		}
+
+		.right {
+			flex-shrink: 0;
+			margin-left: auto; /* drží se vpravo */
+			display: flex;
+			align-items: center;
+			gap: 4px;
+		}
+	}
+
+
 	.tag-group__label {
 		margin: 0 calc(var(--default-grid-baseline) * 2);
 		z-index: 2;
@@ -1226,11 +1263,5 @@ export default {
 		display: inline;
 		align-items: center;
 	}
-	@media only screen and (max-width: 400px) {
-		.sender {
-			text-overflow: ellipsis;
-			overflow: hidden;
-			width: 180px;
-		}
-	}
+
 </style>