Resolve "Too long radio descriptions resize the entire row"

changes/changelog.d/1556.bugfix

+Fix showing too long radio descriptions (#1556)

front/src/components/radios/Card.vue

@@ -13,7 +13,11 @@
           {{ radio.name }}
         </template>
       </h4>
-      <div class="description">
+      <div
+        class="description"
+        :class="{expanded: isDescriptionExpanded}"
+        @click="isDescriptionExpanded = !isDescriptionExpanded"
+      >
         {{ radio.description }}
       </div>
     </div>
@@ -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) {

front/src/style/components/_card.scss

-
-
-.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;