Hide long messages

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

1 files changed, 16 insertions, 1 deletions

diff --git a/apps/comments/src/components/Comment.vue b/apps/comments/src/components/Comment.vue
index 42915d84124..8324305873c 100644
--- a/apps/comments/src/components/Comment.vue
+++ b/apps/comments/src/components/Comment.vue
@@ -83,7 +83,11 @@
 		<!-- Message content -->
 		<!-- The html is escaped and sanitized before rendering -->
 		<!-- eslint-disable-next-line vue/no-v-html-->
-		<div v-else class="comment__message" v-html="renderedContent" />
+		<div v-else
+			:class="{'comment__message--expanded': expanded}"
+			class="comment__message"
+			@click="onExpand"
+			v-html="renderedContent" />
 	</div>
 </template>
 
@@ -153,6 +157,7 @@ export default {
 
 	data() {
 		return {
+			expanded: false,
 			// Only change data locally and update the original
 			// parent data when the request is sent and resolved
 			localMessage: '',
@@ -226,6 +231,10 @@ export default {
 			}
 			this.onEditComment(this.localMessage.trim())
 		},
+
+		onExpand() {
+			this.expanded = true
+		},
 	},
 
 }
@@ -297,6 +306,12 @@ $comment-padding: 10px;
 	&__message {
 		white-space: pre-wrap;
 		word-break: break-word;
+		max-height: 70px;
+		overflow: hidden;
+		&--expanded {
+			max-height: none;
+			overflow: visible;
+		}
 	}
 }