fix(editor): Mitigate performance issue in FE manual executions (#17119)

packages/frontend/editor-ui/src/components/RunData.vue

@@ -1455,7 +1455,6 @@ defineExpose({ enterEditMode });
 							(inputData.length || binaryData.length || search || hasMultipleInputNodes) &&
 							!editMode.enabled)
 					"
-					:class="$style.displayModeSelect"
 					:compact="props.compact"
 					:value="displayMode"
 					:has-binary-data="binaryData.length > 0"
@@ -1468,8 +1467,6 @@ defineExpose({ enterEditMode });
 					@change="onDisplayModeChange"
 				/>
 
-				<RunDataItemCount v-if="props.compact" v-bind="itemsCountProps" />
-
 				<N8nIconButton
 					v-if="!props.disableEdit && canPinData && !isReadOnlyRoute && !readOnlyEnv"
 					v-show="!editMode.enabled"
@@ -1509,6 +1506,8 @@ defineExpose({ enterEditMode });
 					/>
 				</div>
 			</div>
+
+			<RunDataItemCount v-if="props.compact" v-bind="itemsCountProps" />
 		</div>
 
 		<div v-if="inputSelectLocation === 'header'" :class="$style.inputSelect">
@@ -2071,6 +2070,7 @@ defineExpose({ enterEditMode });
 		flex-shrink: 0;
 		flex-grow: 0;
 		min-height: auto;
+		gap: var(--spacing-2xs);
 	}
 
 	> *:first-child {
@@ -2250,6 +2250,15 @@ defineExpose({ enterEditMode });
 	.compact & {
 		/* let title text alone decide the height */
 		height: 0;
+		visibility: hidden;
+
+		:global(.el-input__prefix) {
+			transition-duration: 0ms;
+		}
+	}
+
+	.compact:hover & {
+		visibility: visible;
 	}
 }
 
@@ -2331,18 +2340,6 @@ defineExpose({ enterEditMode });
 	padding: 0 var(--ndv-spacing);
 }
 
-.search,
-.displayModeSelect {
-	.compact:not(:hover) & {
-		opacity: 0;
-		display: none;
-	}
-
-	.compact:hover & {
-		opacity: 1;
-	}
-}
-
 .executingMessage {
 	.compact & {
 		color: var(--color-text-light);