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
n8n-io · Aug 9, 2023 · 0339732 · 0339732
1 parent eda34a7
commit 0339732
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 15 deletions.
diff --git 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
@@ -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,15 +200,16 @@ export default defineComponent({
 
 <style module lang="scss">
 .previewContainer {
-	height: calc(100% - $header-height);
+	position: relative;
+	height: 100%;
 	overflow: hidden;
 }
 
 .executionDetails {
 	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 {