feat: enhance WorkflowPreview and TemplateCard components with additional styling and className prop

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

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}

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>