From 1bf2f4f6171d666391bb3a3a312468bc083446e3 Mon Sep 17 00:00:00 2001
From: Elias Meire <elias@meire.dev>
Date: Thu, 15 Aug 2024 14:54:54 +0200
Subject: [PATCH] fix(editor): Truncate long data pill labels in schema view
 (#10427)

---
 .../src/components/RunDataSchema.vue          |  1 +
 .../src/components/RunDataSchemaItem.vue      | 33 ++++++++++++-------
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/packages/editor-ui/src/components/RunDataSchema.vue b/packages/editor-ui/src/components/RunDataSchema.vue
index c087c39ce0c45..acb9f8a576a38 100644
--- a/packages/editor-ui/src/components/RunDataSchema.vue
+++ b/packages/editor-ui/src/components/RunDataSchema.vue
@@ -463,6 +463,7 @@ watch(
 
 .innerSchema {
 	min-height: 0;
+	min-width: 0;
 
 	> div {
 		margin-bottom: var(--spacing-xs);
diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
index 34979053f7ad4..18b141932933d 100644
--- a/packages/editor-ui/src/components/RunDataSchemaItem.vue
+++ b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -198,6 +198,8 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 	display: flex;
 	gap: var(--spacing-2xs);
 	align-items: baseline;
+	flex-grow: 1;
+	min-width: 0;
 }
 
 .sub {
@@ -212,6 +214,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 	display: inline-flex;
 	flex-direction: column;
 	order: -1;
+	min-width: 0;
 
 	.innerSub > div:first-child {
 		margin-top: var(--spacing-2xs);
@@ -242,21 +245,14 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 	height: 24px;
 	padding: 0 var(--spacing-3xs);
 	border: 1px solid var(--color-foreground-light);
-	border-radius: 4px;
+	border-radius: var(--border-radius-base);
 	background-color: var(--color-background-xlight);
 	font-size: var(--font-size-2xs);
 	color: var(--color-text-dark);
+	max-width: 50%;
 
-	span {
-		display: flex;
-		height: 100%;
-		align-items: center;
-
-		svg {
-			path {
-				fill: var(--color-text-light);
-			}
-		}
+	path {
+		fill: var(--color-text-light);
 	}
 
 	&.mappable {
@@ -273,11 +269,26 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 }
 
 .label {
+	display: flex;
+	min-width: 0;
+	align-items: center;
+
 	> span {
+		display: flex;
+		align-items: center;
+
 		margin-left: var(--spacing-3xs);
 		padding-left: var(--spacing-3xs);
 		border-left: 1px solid var(--color-foreground-light);
 
+		overflow: hidden;
+
+		span {
+			overflow: hidden;
+			text-overflow: ellipsis;
+			white-space: nowrap;
+		}
+
 		&.arrayIndex {
 			border: 0;
 			padding-left: 0;