From a1ab06afcbabcdabbff5eee026b8ad7872936144 Mon Sep 17 00:00:00 2001
From: Felix Turner <felixturner@gmail.com>
Date: Fri, 26 Sep 2025 14:53:41 -0700
Subject: [PATCH] [feat] Enhance workflow template card UI

 - Move tutorial button to overlay on template image to avoid ceontent shift on hover
 - Increase description text display from 2 to 5 lines for more context
 - increase title size for readability
 - Improve card layout: larger image, cleaner borders and padding
 - Update SquareChip background for visual consistency (bg-black/20)
---
 src/components/card/CardContainer.vue         |  2 +-
 src/components/chip/SquareChip.vue            |  2 +-
 .../widget/WorkflowTemplateSelectorDialog.vue | 53 ++++++++-----------
 3 files changed, 24 insertions(+), 33 deletions(-)

diff --git a/src/components/card/CardContainer.vue b/src/components/card/CardContainer.vue
index 390e441a0b..fdd6765022 100644
--- a/src/components/card/CardContainer.vue
+++ b/src/components/card/CardContainer.vue
@@ -18,7 +18,7 @@ const containerClasses = computed(() => {
     'cursor-pointer flex flex-col bg-white dark-theme:bg-zinc-800 rounded-lg shadow-sm border border-zinc-200 dark-theme:border-zinc-700 overflow-hidden'
 
   if (type === 'workflow-template-card') {
-    return `cursor-pointer p-2 flex flex-col hover:bg-white dark-theme:hover:bg-zinc-800 rounded-lg transition-background duration-200 ease-in-out`
+    return `cursor-pointer flex flex-col bg-white dark-theme:bg-zinc-900 rounded-lg shadow-sm border border-zinc-200 dark-theme:border-zinc-700 overflow-hidden hover:bg-white dark-theme:hover:bg-zinc-800 transition-background duration-200 ease-in-out`
   }
 
   const ratioClasses = {
diff --git a/src/components/chip/SquareChip.vue b/src/components/chip/SquareChip.vue
index c886b089b2..06095aed0f 100644
--- a/src/components/chip/SquareChip.vue
+++ b/src/components/chip/SquareChip.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="inline-flex justify-center items-center gap-1 shrink-0 py-1 px-2 text-xs bg-[#D9D9D966]/40 rounded font-bold text-white/90"
+    class="inline-flex justify-center items-center gap-1 shrink-0 py-1 px-2 text-xs bg-black/20 rounded font-bold text-white/90"
   >
     <slot name="icon" class="text-xs text-white/90"></slot>
     <span>{{ label }}</span>
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index 5e8397880d..108b2e71a5 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -184,9 +184,7 @@
               <CardTop ratio="square">
                 <template #default>
                   <!-- Template Thumbnail -->
-                  <div
-                    class="w-full h-full relative rounded-lg overflow-hidden"
-                  >
+                  <div class="w-full h-full relative overflow-hidden">
                     <template v-if="template.mediaType === 'audio'">
                       <AudioThumbnail :src="getBaseThumbnailSrc(template)" />
                     </template>
@@ -251,6 +249,19 @@
                       v-if="loadingTemplate === template.name"
                       class="absolute inset-0 z-10 w-12 h-12 m-auto"
                     />
+                    <button
+                      v-if="template.tutorialUrl"
+                      v-tooltip.bottom="{
+                        value: $t('g.seeTutorial'),
+                        pt: {
+                          text: { class: 'text-sm' }
+                        }
+                      }"
+                      class="absolute top-2 right-2 z-20 inline-flex items-center justify-center rounded-lg bg-black/20 w-8 h-8 cursor-pointer border-0"
+                      @click.stop="openTutorial(template)"
+                    >
+                      <i class="pi pi-question-circle text-white/80 text-lg" />
+                    </button>
                   </div>
                 </template>
                 <template #bottom-right>
@@ -266,9 +277,9 @@
             </template>
             <template #bottom>
               <CardBottom>
-                <div class="flex flex-col gap-2 pt-3">
+                <div class="flex flex-col gap-2 p-4">
                   <h3
-                    class="line-clamp-1 text-sm m-0"
+                    class="line-clamp-2 text-lg font-medium m-0"
                     :title="
                       getTemplateTitle(
                         template,
@@ -283,31 +294,12 @@
                       )
                     }}
                   </h3>
-                  <div class="flex justify-between gap-2">
-                    <div class="flex-1">
-                      <p
-                        class="line-clamp-2 text-sm text-muted m-0"
-                        :title="getTemplateDescription(template)"
-                      >
-                        {{ getTemplateDescription(template) }}
-                      </p>
-                    </div>
-                    <div
-                      v-if="template.tutorialUrl"
-                      class="flex flex-col-reverse justify-center"
-                    >
-                      <IconButton
-                        v-if="hoveredTemplate === template.name"
-                        v-tooltip.bottom="$t('g.seeTutorial')"
-                        v-bind="$attrs"
-                        type="primary"
-                        size="sm"
-                        @click.stop="openTutorial(template)"
-                      >
-                        <i class="icon-[lucide--info] size-4" />
-                      </IconButton>
-                    </div>
-                  </div>
+                  <p
+                    class="line-clamp-5 text-sm text-muted m-0"
+                    :title="getTemplateDescription(template)"
+                  >
+                    {{ getTemplateDescription(template) }}
+                  </p>
                 </div>
               </CardBottom>
             </template>
@@ -378,7 +370,6 @@ import ProgressSpinner from 'primevue/progressspinner'
 import { computed, onBeforeUnmount, provide, ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
 
-import IconButton from '@/components/button/IconButton.vue'
 import IconTextButton from '@/components/button/IconTextButton.vue'
 import CardBottom from '@/components/card/CardBottom.vue'
 import CardContainer from '@/components/card/CardContainer.vue'