fix(editor): Truncate long data pill labels in schema view (n8n-io#10427

)
netroy · Aug 15, 2024 · 1bf2f4f · 1bf2f4f
1 parent 2043daa
commit 1bf2f4f
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 11 deletions.
diff --git 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
@@ -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;