From 2051ee67f20613e1ab038df88b455ceadebd3280 Mon Sep 17 00:00:00 2001
From: Mutasem <mutdmour@gmail.com>
Date: Tue, 29 Mar 2022 11:23:08 +0200
Subject: [PATCH] move items, fix positions

---
 packages/editor-ui/src/components/RunData.vue | 26 ++++++++++++-------
 1 file changed, 16 insertions(+), 10 deletions(-)

diff --git a/packages/editor-ui/src/components/RunData.vue b/packages/editor-ui/src/components/RunData.vue
index 3fe3ad6130..86d9ad648a 100644
--- a/packages/editor-ui/src/components/RunData.vue
+++ b/packages/editor-ui/src/components/RunData.vue
@@ -75,6 +75,12 @@
 			</div>
 		</div>
 
+		<div>
+			<n8n-text v-if="hasNodeRun && dataCount > 0">
+				{{ dataCount }} {{ $locale.baseText(dataCount === 1 ? 'node.output.item' : 'node.output.items') }}
+			</n8n-text>
+		</div>
+
 		<div v-if="!hasNodeRun" :class="$style.center">
 			<div v-if="workflowRunning">
 				<div :class="$style.spinner"><n8n-spinner /></div>
@@ -112,10 +118,6 @@
 		</div>
 
 		<div v-else-if="hasNodeRun && displayMode === 'table' && tableData" :class="$style.dataDisplay">
-			<n8n-text tag="div">
-				{{ dataCount }} {{ $locale.baseText(dataCount === 1 ? 'node.output.item' : 'node.output.items') }}
-			</n8n-text>
-
 			<table :class="$style.table">
 				<tr>
 					<th v-for="column in (tableData.columns || [])" :key="column">{{column}}</th>
@@ -126,7 +128,7 @@
 			</table>
 		</div>
 
-		<div v-else-if="hasNodeRun && displayMode === 'json'" :class="$style.dataDisplay">
+		<div v-else-if="hasNodeRun && displayMode === 'json'" :class="$style.jsonDisplay">
 			<vue-json-pretty
 				:data="jsonData"
 				:deep="10"
@@ -703,6 +705,7 @@ export default mixins(
 .header {
 	display: flex;
 	align-items: center;
+	margin-bottom: var(--spacing-s);
 
 	> *:first-child {
 		flex-grow: 1;
@@ -712,16 +715,19 @@ export default mixins(
 .dataDisplay {
 	position: absolute;
 	bottom: 0;
-	top: 60px;
-	left: 16px;
+	top: 98px;
+	left: 0;
+	padding-left: var(--spacing-s);
 	right: 0;
 	overflow-y: auto;
 	line-height: 1.5;
 	word-break: normal;
+}
 
-	> * {
-		margin-bottom: var(--spacing-s);
-	}
+.jsonDisplay {
+	composes: dataDisplay;
+	background-color: var(--color-background-base);
+	padding-top: var(--spacing-s);
 }
 
 .table {