Increase template card titles' line height to 2 lines (#3722)

Author: christian-byrne

src/components/templates/TemplateWorkflowCard.vue

@@ -2,9 +2,9 @@
   <Card
     ref="cardRef"
     :data-testid="`template-workflow-${template.name}`"
-    class="w-64 template-card rounded-2xl overflow-hidden cursor-pointer shadow-elevation-2 dark-theme:bg-dark-elevation-1"
+    class="w-64 template-card rounded-2xl overflow-hidden cursor-pointer shadow-elevation-2 dark-theme:bg-dark-elevation-1 h-full"
     :pt="{
-      body: { class: 'p-0' }
+      body: { class: 'p-0 h-full flex flex-col' }
     }"
     @click="$emit('loadWorkflow', template.name)"
   >
@@ -51,11 +51,11 @@
     </template>
     <template #content>
       <div class="flex items-center px-4 py-3">
-        <div class="flex-1">
-          <h3 class="line-clamp-1 text-lg font-normal" :title="title">
+        <div class="flex-1 flex flex-col">
+          <h3 class="line-clamp-2 text-lg font-normal mb-0 h-10" :title="title">
             {{ title }}
           </h3>
-          <p class="line-clamp-2 text-sm text-muted" :title="description">
+          <p class="line-clamp-2 text-sm text-muted grow" :title="description">
             {{ description }}
           </p>
         </div>

src/components/templates/TemplateWorkflowsContent.vue

@@ -43,9 +43,13 @@
             </h2>
           </div>
           <div
-            class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] gap-8 justify-items-center"
+            class="grid grid-cols-[repeat(auto-fill,minmax(16rem,1fr))] auto-rows-fr gap-8 justify-items-center"
           >
-            <div v-for="template in selectedTab.templates" :key="template.name">
+            <div
+              v-for="template in selectedTab.templates"
+              :key="template.name"
+              class="h-full"
+            >
               <TemplateWorkflowCard
                 :source-module="selectedTab.moduleName"
                 :template="template"