From f7b6e8a3bc9da1aff3ededc314ce7cf321a9f0ed Mon Sep 17 00:00:00 2001
From: Julien Veyssier <eneiluj@posteo.net>
Date: Thu, 22 Sep 2022 13:05:28 +0200
Subject: [PATCH 1/2] use richtext component for description, adjust style to
 make it work in Text

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
---
 src/views/CardReferenceWidget.vue | 33 ++++++++++++++++++++++++-------
 1 file changed, 26 insertions(+), 7 deletions(-)

diff --git a/src/views/CardReferenceWidget.vue b/src/views/CardReferenceWidget.vue
index 352495979..75aefb890 100644
--- a/src/views/CardReferenceWidget.vue
+++ b/src/views/CardReferenceWidget.vue
@@ -62,9 +62,14 @@
 		<div class="line description-assignees">
 			<TextIcon v-if="card.description" :size="20" class="icon" />
 			<div v-if="card.description"
-				class="description"
-				:title="card.description">
-				{{ card.description }}
+				:class="{
+					'description': true,
+					'short-description': shortDescription,
+				}">
+				<RichText v-tooltip.top="{ content: shortDescription ? t('deck', 'Click to expand description') : undefined }"
+					:text="card.description"
+					:use-markdown="true"
+					@click.native="shortDescription = !shortDescription" />
 			</div>
 			<div v-if="card.assignedUsers .length > 0"
 				class="spacer" />
@@ -83,6 +88,7 @@ import DeckIcon from '../components/icons/DeckIcon.vue'
 import AvatarList from '../components/cards/AvatarList.vue'
 import labelStyle from '../mixins/labelStyle.js'
 
+import { RichText } from '@nextcloud/vue-richtext'
 import moment from '@nextcloud/moment'
 import { generateUrl } from '@nextcloud/router'
 
@@ -94,6 +100,7 @@ export default {
 		DeckIcon,
 		CalendarBlankIcon,
 		TextIcon,
+		RichText,
 	},
 
 	mixins: [labelStyle],
@@ -115,6 +122,7 @@ export default {
 
 	data() {
 		return {
+			shortDescription: true,
 		}
 	},
 
@@ -176,6 +184,8 @@ export default {
 
 	.link {
 		text-decoration: underline;
+		color: var(--color-main-text) !important;
+		padding: 0 !important;
 	}
 
 	.line {
@@ -201,13 +211,22 @@ export default {
 	.description-assignees {
 		width: 100%;
 		display: flex;
-		align-items: center;
+		align-items: start;
+
+		.icon {
+			align-self: start;
+			margin-top: 8px;
+		}
 
 		.description {
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
 			margin-right: 8px;
+			padding-top: 6px;
+			max-height: 250px;
+			overflow: scroll;
+			&.short-description {
+				max-height: 25px;
+				overflow: hidden;
+			}
 		}
 
 		.card-assignees {

From 7403aafe1627f310ac942d4e72d64fd0896cb85c Mon Sep 17 00:00:00 2001
From: Julien Veyssier <eneiluj@posteo.net>
Date: Thu, 22 Sep 2022 17:02:03 +0200
Subject: [PATCH 2/2] fix width issues

Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
---
 src/init-card-reference.js        | 1 -
 src/views/CardReferenceWidget.vue | 4 ++++
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/init-card-reference.js b/src/init-card-reference.js
index f7d2b448a..618a9065d 100644
--- a/src/init-card-reference.js
+++ b/src/init-card-reference.js
@@ -36,7 +36,6 @@ registerWidget('deck-card', (el, { richObjectType, richObject, accessible }) =>
 	// trick to change the wrapper element size, otherwise it always is 100%
 	// which is not very nice with a simple card
 	el.parentNode.style['max-width'] = '400px'
-	el.parentNode.style['min-width'] = '200px'
 	el.parentNode.style['margin-left'] = '0'
 	el.parentNode.style['margin-right'] = '0'
 
diff --git a/src/views/CardReferenceWidget.vue b/src/views/CardReferenceWidget.vue
index 75aefb890..a0d711690 100644
--- a/src/views/CardReferenceWidget.vue
+++ b/src/views/CardReferenceWidget.vue
@@ -179,6 +179,10 @@ export default {
 
 .deck-card-reference {
 	width: 100%;
+	// needed for the specific case of Text
+	.editor__content & {
+		width: calc(100% - 24px);
+	}
 	white-space: normal;
 	padding: 12px;