From 4d2f904d726731b2e9405fe73538125c8d9266c6 Mon Sep 17 00:00:00 2001
From: twwu <twwu@dify.ai>
Date: Fri, 13 Jun 2025 10:14:45 +0800
Subject: [PATCH] feat: enhance WorkflowPreview and TemplateCard components
 with additional styling and className prop

---
 .../list/template-card/details/index.tsx                     | 5 ++++-
 .../create-from-pipeline/list/template-card/index.tsx        | 2 +-
 web/app/components/workflow/workflow-preview/index.tsx       | 5 ++++-
 3 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
index 8e1de45073..ae1eceba2d 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/details/index.tsx
@@ -50,7 +50,10 @@ const Details = ({
   return (
     <div className='flex h-full'>
       <div className='flex grow items-center justify-center p-3 pr-0'>
-        <WorkflowPreview {...pipelineTemplateInfo.graph} />
+        <WorkflowPreview
+          {...pipelineTemplateInfo.graph}
+          className='overflow-hidden rounded-2xl'
+        />
       </div>
       <div className='relative flex w-[360px] shrink-0 flex-col'>
         <button
diff --git a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
index de2d03ffbe..770b342292 100644
--- a/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
+++ b/web/app/components/datasets/create-from-pipeline/list/template-card/index.tsx
@@ -189,7 +189,7 @@ const TemplateCard = ({
         <Modal
           isShow={showDetailModal}
           onClose={closeDetailsModal}
-          className='h-[calc(100vh-64px)] max-w-[1680px] p-0'
+          className='h-[calc(100vh-64px)] max-w-[1680px] rounded-3xl p-0'
         >
           <Details
             id={pipeline.id}
diff --git a/web/app/components/workflow/workflow-preview/index.tsx b/web/app/components/workflow/workflow-preview/index.tsx
index fad7a033af..2aeb09cd1e 100644
--- a/web/app/components/workflow/workflow-preview/index.tsx
+++ b/web/app/components/workflow/workflow-preview/index.tsx
@@ -60,11 +60,13 @@ type WorkflowPreviewProps = {
   nodes: Node[]
   edges: Edge[]
   viewport: Viewport
+  className?: string
 }
 const WorkflowPreview = ({
   nodes,
   edges,
   viewport,
+  className,
 }: WorkflowPreviewProps) => {
   const [nodesData, setNodesData] = useState(initialNodes(nodes, edges))
   const [edgesData, setEdgesData] = useState(initialEdges(edges, nodes))
@@ -83,6 +85,7 @@ const WorkflowPreview = ({
       id='workflow-container'
       className={cn(
         'relative h-full w-full',
+        className,
       )}
     >
       <>
@@ -125,7 +128,7 @@ const WorkflowPreview = ({
         <Background
           gap={[14, 14]}
           size={2}
-          className="bg-workflow-canvas-workflow-bg"
+          className='bg-workflow-canvas-workflow-bg'
           color='var(--color-workflow-canvas-workflow-dot-color)'
         />
       </ReactFlow>