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

fix: overlapping text on small screens
nextcloud · Sep 2, 2024 · f5f1085 · f5f1085
2 parents 3dc1b55 + 04b8849
commit f5f1085
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 14 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
@@ -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>
diff --git a/src/components/ThreadEnvelope.vue b/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,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>