diff --git a/src/components/Envelope.vue b/src/components/Envelope.vue
index 1884242712..664e5f1b4e 100644
--- a/src/components/Envelope.vue
+++ b/src/components/Envelope.vue
@@ -78,6 +78,7 @@
+
{{ isEncrypted ? t('mail', 'Encrypted message') : data.previewText.trim() }}
@@ -344,6 +345,7 @@ import EnvelopeSkeleton from './EnvelopeSkeleton.vue'
import AlertOctagonIcon from 'vue-material-design-icons/AlertOctagon.vue'
import Avatar from './Avatar.vue'
import IconCreateEvent from 'vue-material-design-icons/Calendar.vue'
+import SparkleIcon from 'vue-material-design-icons/Creation.vue'
import ClockOutlineIcon from 'vue-material-design-icons/ClockOutline.vue'
import CheckIcon from 'vue-material-design-icons/Check.vue'
import ChevronLeft from 'vue-material-design-icons/ChevronLeft.vue'
@@ -414,6 +416,7 @@ export default {
PlusIcon,
TagIcon,
TagModal,
+ SparkleIcon,
Star,
StarOutline,
EmailRead,
@@ -926,11 +929,21 @@ export default {
}
&__preview-text {
color: var(--color-text-maxcontrast);
- white-space: nowrap;
overflow: hidden;
- text-overflow: ellipsis;
font-weight: initial;
- flex: 1 1;
+ max-height: calc(var(--default-font-size) * var(--default-line-height) * 2);
+
+ /* Weird CSS hacks to make text ellipsize without white-space: nowrap */
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+
+ .material-design-icon {
+ display: inline;
+
+ position: relative;
+ top: 2px;
+ }
}
}