fix(editor): Styling/UX improvements on the new logs view (#14789)

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

@@ -33,6 +33,7 @@ const props = withDefaults(
 		runIndex: number | undefined;
 		totalRuns: number | undefined;
 		search: string | undefined;
+		compact?: boolean;
 	}>(),
 	{
 		editMode: () => ({}),
@@ -123,7 +124,13 @@ const getListItemName = (path: string) => {
 </script>
 
 <template>
-	<div ref="jsonDataContainer" :class="[$style.jsonDisplay, { [$style.highlight]: highlight }]">
+	<div
+		ref="jsonDataContainer"
+		:class="[
+			$style.jsonDisplay,
+			{ [$style.highlight]: highlight, [$style.compact]: props.compact },
+		]"
+	>
 		<Suspense>
 			<LazyRunDataJsonActions
 				v-if="!editMode.enabled"
@@ -238,6 +245,10 @@ const getListItemName = (path: string) => {
 			color: var(--color-primary);
 		}
 	}
+
+	&.compact {
+		padding-left: var(--spacing-2xs);
+	}
 }
 </style>
 
@@ -245,6 +256,7 @@ const getListItemName = (path: string) => {
 .vjs-tree {
 	color: var(--color-json-default);
 	--color-line-break: var(--color-code-line-break);
+	font-size: var(--font-size-2xs);
 }
 
 .vjs-tree-node {