From af98327a5e4f2332b78b4d460e6eb208f0782d28 Mon Sep 17 00:00:00 2001
From: "n8n-cat-bot[bot]" <283985454+n8n-cat-bot[bot]@users.noreply.github.com>
Date: Fri, 9 Oct 2026 10:46:58 +0000
Subject: [PATCH] fix: Keep execution details clear of preview canvas (#40176)

Co-authored-by: n8n-cat-bot[bot] <n8n-cat-bot[bot]@users.noreply.github.com>
---
 .../workflow/WorkflowExecutionsPreview.vue    | 25 +++++++++++--------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionsPreview.vue b/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionsPreview.vue
index 32e69e8b17c..dd32e18c13e 100644
--- a/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionsPreview.vue
+++ b/packages/frontend/editor-ui/src/features/execution/executions/components/workflow/WorkflowExecutionsPreview.vue
@@ -497,38 +497,41 @@ const onVoteClick = async (voteValue: AnnotationVote) => {
 			</div>
 		</div>
 
-		<ExecutionPreviewHost :workflow-id="workflowId" :execution-id="executionId" :node-id="nodeId" />
+		<ExecutionPreviewHost
+			:class="$style.previewHost"
+			:workflow-id="workflowId"
+			:execution-id="executionId"
+			:node-id="nodeId"
+		/>
 	</div>
 </template>
 
 <style module lang="scss">
 .previewContainer {
-	position: relative;
+	display: flex;
+	flex-direction: column;
 	height: 100%;
 	overflow: hidden;
 }
 
 .executionDetails {
-	position: absolute;
-	// Stack above the native canvas below it; the canvas owns its own stacking
-	// context, so without this its panes would intercept clicks on these actions.
-	z-index: 1;
+	flex-shrink: 0;
 	padding: var(--spacing--md);
 	width: 100%;
 	display: flex;
 	justify-content: space-between;
 	align-items: flex-start;
-	transition: all 150ms ease-in-out;
-	pointer-events: none;
+	background-color: var(--background--surface);
 
 	> div:last-child {
 		display: flex;
 		align-items: center;
 	}
+}
 
-	& * {
-		pointer-events: all;
-	}
+.previewHost {
+	flex: 1;
+	min-height: 0;
 }
 
 .executionDetailsLeft {