Merge pull request #10065 from nextcloud/fix/mobile-overlaping-stuff

fix: overlapping text on small screens

src/components/EnvelopeSkeleton.vue

@@ -630,7 +630,7 @@ export default {
 		flex: 0 0 auto;
 		justify-content: center;
 		align-self: start;
-		margin-top: -4px;
+		margin-top: 0;
 	}
 
 }

src/components/Message.vue

@@ -173,12 +173,16 @@ export default {
 .reply-buttons {
 	margin: 0 10px 0 50px;
 	display: flex;
+	flex-wrap: wrap;
+	gap: 5px;
 	justify-content: space-between;
 	align-items: center;
 
 	&__suggested {
-		display: flex;
 		justify-content: flex-start;
+		display: flex;
+		flex-wrap: wrap;
+		gap: 5px;
 		&__button {
 			margin-right: 5px;
 			border-radius: 12px;
@@ -192,4 +196,21 @@ export default {
 		margin-left: auto;
 	}
 }
+@media screen and (max-width: 600px) {
+	.reply-buttons {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 5px;
+
+		&__suggested {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 5px;
+		}
+
+		&__notsuggested {
+			margin-left: 0;
+		}
+	}
+}
 </style>

src/components/ThreadEnvelope.vue

@@ -64,15 +64,17 @@
 							{{ isEncrypted ? t('mail', 'Encrypted message') : envelope.previewText }}
 						</span>
 					</div>
-					<div v-for="tag in tags"
-						:key="tag.id"
-						class="tag-group">
-						<div class="tag-group__bg"
-							:style="{'background-color': tag.color}" />
-						<span class="tag-group__label"
-							:style="{color: tag.color}">
-							{{ translateTagDisplayName(tag) }}
-						</span>
+					<div class="tagline">
+						<div v-for="tag in tags"
+							:key="tag.id"
+							class="tag-group">
+							<div class="tag-group__bg"
+								:style="{'background-color': tag.color}" />
+							<span class="tag-group__label"
+								:style="{color: tag.color}">
+								{{ translateTagDisplayName(tag) }}
+							</span>
+						</div>
 					</div>
 				</div>
 				<div class="envelope__header__left__unsubscribe">
@@ -887,9 +889,10 @@ export default {
 <style lang="scss" scoped>
 	.sender {
 		margin-left: 8px;
-
 		&__email{
 			color: var(--color-text-maxcontrast);
+			text-overflow: ellipsis;
+			overflow: hidden;
 		}
 
 		&__external{
@@ -1038,8 +1041,6 @@ export default {
 				color: var(--color-text-maxcontrast);
 			}
 			&__left__sender-subject-tags {
-				text-overflow: ellipsis;
-				overflow: hidden;
 				white-space: nowrap;
 				width: 100%;
 			}
@@ -1088,6 +1089,11 @@ export default {
 		left: 0;
 		opacity: 15%;
 	}
+	.tagline {
+		display: flex;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
 	.tag-group {
 		display: inline-block;
 		border: 1px solid transparent;
@@ -1095,6 +1101,7 @@ export default {
 		position: relative;
 		margin: 0 1px;
 		overflow: hidden;
+		text-overflow: ellipsis;
 		left: 4px;
 	}
 	.smime-text {
@@ -1106,4 +1113,11 @@ export default {
 		display: inline;
 		align-items: center;
 	}
+	@media only screen and (max-width: 400px) {
+		.sender {
+			text-overflow: ellipsis;
+			overflow: hidden;
+			width: 180px;
+		}
+	}
 </style>