mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 04:34:06 -08:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

Browse source
This commit is contained in:
Elias Meire 2024-08-15 14:54:54 +02:00 committed by GitHub
parent 2043daa257
commit 1bf2f4f617
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 23 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
packages/editor-ui/src/components/RunDataSchema.vue
View file

@ -463,6 +463,7 @@ watch(
.innerSchema {
min-height: 0;
min-width: 0;
> div {
margin-bottom: var(--spacing-xs);

33
packages/editor-ui/src/components/RunDataSchemaItem.vue
View file

@ -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;