fix: overlapping text on small screens

Signed-off-by: greta <[email protected]>
nextcloud · Aug 28, 2024 · c76ca3a · c76ca3a
1 parent f66b05a
commit c76ca3a
Show file tree

Hide file tree

Showing 3 changed files with 40 additions and 5 deletions.
diff --git a/src/components/EnvelopeSkeleton.vue b/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;
 	}
 
 }

diff --git a/src/components/Message.vue b/src/components/Message.vue
@@ -170,12 +170,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;
@@ -189,4 +193,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>
diff --git a/src/components/ThreadEnvelope.vue b/src/components/ThreadEnvelope.vue
@@ -64,6 +64,7 @@
 							{{ isEncrypted ? t('mail', 'Encrypted message') : envelope.previewText }}
 						</span>
 					</div>
+					<div class="tagline">
 					<div v-for="tag in tags"
 						:key="tag.id"
 						class="tag-group">
@@ -74,6 +75,7 @@
 							{{ translateTagDisplayName(tag) }}
 						</span>
 					</div>
+					</div>
 				</div>
 				<div class="envelope__header__left__unsubscribe">
 					<NcButton v-if="message && message.dkimValid && (message.unsubscribeUrl || message.unsubscribeMailto)"
@@ -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,13 +1089,19 @@ export default {
 		left: 0;
 		opacity: 15%;
 	}
+	.tagline {
+		display: flex;
+		text-overflow: ellipsis;
+		overflow: hidden;
+	}
 	.tag-group {
 		display: inline-block;
 		border: 1px solid transparent;
 		border-radius: var(--border-radius-pill);
 		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>