From 03397323784809eb64c30b2ee535e8516ab06fbf Mon Sep 17 00:00:00 2001
From: Csaba Tuncsik <csaba@n8n.io>
Date: Wed, 9 Aug 2023 14:41:23 +0200
Subject: [PATCH] fix(editor): Update execution view layout (#6882)

* fix(editor): Update execution view layout

* fix(editor): Update element UI dropdown close method

* fix(editor): Icons vertical alignment in exec list card
---
 .../ExecutionsView/ExecutionCard.vue          |  2 +-
 .../ExecutionsView/ExecutionPreview.vue       | 19 +++++--------------
 2 files changed, 6 insertions(+), 15 deletions(-)

diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
index 45d67cbea9..ba1a5558a9 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionCard.vue
@@ -238,7 +238,7 @@ export default defineComponent({
 
 .icons {
 	display: flex;
-	align-items: baseline;
+	align-items: center;
 }
 
 .icon {
diff --git a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
index 50ba270e68..b9a4d4c845 100644
--- a/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
+++ b/packages/editor-ui/src/components/ExecutionsView/ExecutionPreview.vue
@@ -12,7 +12,7 @@
 	</div>
 	<div v-else :class="$style.previewContainer">
 		<div
-			:class="{ [$style.executionDetails]: true, [$style.sidebarCollapsed]: sidebarCollapsed }"
+			:class="$style.executionDetails"
 			v-if="activeExecution"
 			:data-test-id="`execution-preview-details-${executionId}`"
 		>
@@ -128,14 +128,12 @@
 
 <script lang="ts">
 import { defineComponent } from 'vue';
-import { mapStores } from 'pinia';
 
 import { useMessage } from '@/composables';
 import WorkflowPreview from '@/components/WorkflowPreview.vue';
 import type { IExecutionUIData } from '@/mixins/executionsHelpers';
 import { executionHelpers } from '@/mixins/executionsHelpers';
 import { MODAL_CONFIRM, VIEWS } from '@/constants';
-import { useUIStore } from '@/stores/ui.store';
 import { ElDropdown } from 'element-plus';
 
 type RetryDropdownRef = InstanceType<typeof ElDropdown> & { hide: () => void };
@@ -158,13 +156,9 @@ export default defineComponent({
 		};
 	},
 	computed: {
-		...mapStores(useUIStore),
 		executionUIDetails(): IExecutionUIData | null {
 			return this.activeExecution ? this.getExecutionUIDetails(this.activeExecution) : null;
 		},
-		sidebarCollapsed(): boolean {
-			return this.uiStore.sidebarMenuCollapsed;
-		},
 		executionMode(): string {
 			return this.activeExecution?.mode || '';
 		},
@@ -197,7 +191,7 @@ export default defineComponent({
 			// Hide dropdown when clicking outside of current document
 			const retryDropdownRef = this.$refs.retryDropdown as RetryDropdownRef | undefined;
 			if (retryDropdownRef && event.relatedTarget === null) {
-				retryDropdownRef.hide();
+				retryDropdownRef.handleClose();
 			}
 		},
 	},
@@ -206,7 +200,8 @@ export default defineComponent({
 
 <style module lang="scss">
 .previewContainer {
-	height: calc(100% - $header-height);
+	position: relative;
+	height: 100%;
 	overflow: hidden;
 }
 
@@ -214,7 +209,7 @@ export default defineComponent({
 	position: absolute;
 	padding: var(--spacing-m);
 	padding-right: var(--spacing-xl);
-	width: calc(100% - 510px);
+	width: 100%;
 	display: flex;
 	justify-content: space-between;
 	transition: all 150ms ease-in-out;
@@ -223,10 +218,6 @@ export default defineComponent({
 	& * {
 		pointer-events: all;
 	}
-
-	&.sidebarCollapsed {
-		width: calc(100% - 375px);
-	}
 }
 
 .spinner {