diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Legend/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Legend/index.tsx
index 43675c8c9b..8f2ecac8a5 100644
--- a/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Legend/index.tsx
+++ b/www/packages/docs-ui/src/components/WorkflowDiagram/Common/Legend/index.tsx
@@ -11,7 +11,7 @@ export const WorkflowDiagramLegend = ({
   hideLegend = false,
 }: WorkflowDiagramLegendProps) => {
   return (
-    <div className="flex gap-docs_0.5 mt-1">
+    <div className="flex gap-docs_0.5">
       {!hideLegend && (
         <>
           <div className="flex items-center gap-docs_0.5">
diff --git a/www/packages/docs-ui/src/components/WorkflowDiagram/List/index.tsx b/www/packages/docs-ui/src/components/WorkflowDiagram/List/index.tsx
index 6ea00a64d3..fae40ae504 100644
--- a/www/packages/docs-ui/src/components/WorkflowDiagram/List/index.tsx
+++ b/www/packages/docs-ui/src/components/WorkflowDiagram/List/index.tsx
@@ -13,14 +13,20 @@ export const WorkflowDiagramList = ({
   const clusters = createNodeClusters(workflow.steps)
 
   return (
-    <div className="flex flex-col gap-docs_0.5 my-docs_1 workflow-list-diagram w-fit">
-      {Object.entries(clusters).map(([depth, cluster]) => {
-        const next = getNextCluster(clusters, Number(depth))
+    <div className="flex flex-col gap-docs_1 my-docs_1 w-fit">
+      <div className="workflow-list-diagram flex flex-col gap-docs_0.5 w-fit">
+        {Object.entries(clusters).map(([depth, cluster]) => {
+          const next = getNextCluster(clusters, Number(depth))
 
-        return (
-          <WorkflowDiagramListDepth cluster={cluster} next={next} key={depth} />
-        )
-      })}
+          return (
+            <WorkflowDiagramListDepth
+              cluster={cluster}
+              next={next}
+              key={depth}
+            />
+          )
+        })}
+      </div>
       <WorkflowDiagramLegend hideLegend={hideLegend} />
     </div>
   )