Truncate long data pill labels in schema view

n8n-io · Aug 15, 2024 · 7f928a4 · 7f928a4
1 parent d98e29e
commit 7f928a4
Showing 1 changed file with 21 additions and 11 deletions.
diff --git a/packages/editor-ui/src/components/RunDataSchemaItem.vue b/packages/editor-ui/src/components/RunDataSchemaItem.vue
@@ -198,6 +198,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
 	display: flex;
 	gap: var(--spacing-2xs);
 	align-items: baseline;
+	flex-grow: 1;
 }
 
 .sub {
@@ -242,21 +243,15 @@ 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);
+	min-width: 0;
+	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 +268,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;