diff --git a/changes/changelog.d/1556.bugfix b/changes/changelog.d/1556.bugfix
new file mode 100644
index 000000000..81e39ab58
--- /dev/null
+++ b/changes/changelog.d/1556.bugfix
@@ -0,0 +1 @@
+Fix showing too long radio descriptions (#1556)
diff --git a/front/src/components/radios/Card.vue b/front/src/components/radios/Card.vue
index d71c7d0b2..e280a91a9 100644
--- a/front/src/components/radios/Card.vue
+++ b/front/src/components/radios/Card.vue
@@ -13,7 +13,11 @@
{{ radio.name }}
-
+
{{ radio.description }}
@@ -55,6 +59,11 @@ export default {
customRadio: { type: Object, required: false, default: () => { return {} } },
objectId: { type: String, required: false, default: null }
},
+ data () {
+ return {
+ isDescriptionExpanded: false
+ }
+ },
computed: {
radio () {
if (Object.keys(this.customRadio).length > 0) {
diff --git a/front/src/style/components/_card.scss b/front/src/style/components/_card.scss
index f653cdc06..d9d9b8137 100644
--- a/front/src/style/components/_card.scss
+++ b/front/src/style/components/_card.scss
@@ -1,13 +1,11 @@
-
-
-.card .description {
- word-wrap: break-word;
+.ui.cards {
+ align-items: flex-start;
}
-
.ui.cards > .card,
.ui.card {
color: var(--card-text-color);
background: var(--card-background);
+ min-height: 200px;
&:not(.flat) {
box-shadow: var(--card-box-shadow);
}
@@ -22,9 +20,22 @@
.meta {
color: var(--discrete-text-color);
}
+ .description {
+ word-wrap: break-word;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ display: -webkit-box;
+ }
+ .description.expanded {
+ text-overflow: initial;
+ overflow: initial;
+ -webkit-line-clamp: initial;
+ -webkit-box-orient: initial;
+ }
}
-
.ui.cards.app-cards {
$card-width: 14em;
$card-height: 23em;