Merge branch 'release-2024-fall' of github.com:ProcessMaker/screen-bu…

…ilder into bugfix/FOUR-19277

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@processmaker/screen-builder",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "scripts": {
     "dev": "VITE_COVERAGE=true vite",
     "build": "vite build",
@@ -57,7 +57,7 @@
     "@fortawesome/fontawesome-free": "^5.6.1",
     "@originjs/vite-plugin-commonjs": "^1.0.3",
     "@panter/vue-i18next": "^0.15.2",
-    "@processmaker/vue-form-elements": "0.60.1",
+    "@processmaker/vue-form-elements": "0.61.0",
     "@processmaker/vue-multiselect": "2.3.0",
     "@storybook/addon-essentials": "^7.6.13",
     "@storybook/addon-interactions": "^7.6.13",
@@ -116,7 +116,7 @@
   },
   "peerDependencies": {
     "@panter/vue-i18next": "^0.15.0",
-    "@processmaker/vue-form-elements": "0.60.1",
+    "@processmaker/vue-form-elements": "0.61.0",
     "i18next": "^15.0.8",
     "vue": "^2.6.12",
     "vuex": "^3.1.1"

src/components/ScreenTemplateCard.vue

@@ -26,7 +26,7 @@
         <div class="template-details">
           <span class="template-name d-block pt-1">{{ template.name }}</span>
           <span class="template-description d-block">{{
-            template.description
+            truncateText(template.description, 100)
           }}</span>
         </div>
         <b-collapse v-model="isApplyOptionsActive">
@@ -178,6 +178,10 @@ export default {
       } else {
         this.selected.splice(index, 1);
       }
+    },
+    truncateText(text, limit) {
+      if (!text) return "";
+      return text.length > limit ? `${text.substring(0, limit)}...` : text;
     }
   }
 };
@@ -213,10 +217,14 @@ export default {
 
 .thumbnail-image {
   width: 100%;
+  height: 100%;
+  object-fit: cover;
   border-radius: 8px 8px 0px 0px;
 }
 
 .thumbnail-image-container {
+  width: 100%;
+  height: 107px;
   border-radius: 8px;
   padding: 0px !important;
   background-size: contain;