mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-25 20:54:07 -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 { .innerSchema {
min-height: 0; min-height: 0;
min-width: 0;
> div { > div {
margin-bottom: var(--spacing-xs); 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; display: flex;
gap: var(--spacing-2xs); gap: var(--spacing-2xs);
align-items: baseline; align-items: baseline;
flex-grow: 1;
min-width: 0;
} }
.sub { .sub {
@ -212,6 +214,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
display: inline-flex; display: inline-flex;
flex-direction: column; flex-direction: column;
order: -1; order: -1;
min-width: 0;
.innerSub > div:first-child { .innerSub > div:first-child {
margin-top: var(--spacing-2xs); margin-top: var(--spacing-2xs);
@ -242,21 +245,14 @@ const getIconBySchemaType = (type: Schema['type']): string => {
height: 24px; height: 24px;
padding: 0 var(--spacing-3xs); padding: 0 var(--spacing-3xs);
border: 1px solid var(--color-foreground-light); border: 1px solid var(--color-foreground-light);
border-radius: 4px; border-radius: var(--border-radius-base);
background-color: var(--color-background-xlight); background-color: var(--color-background-xlight);
font-size: var(--font-size-2xs); font-size: var(--font-size-2xs);
color: var(--color-text-dark); color: var(--color-text-dark);
max-width: 50%;
span { path {
display: flex; fill: var(--color-text-light);
height: 100%;
align-items: center;
svg {
path {
fill: var(--color-text-light);
}
}
} }
&.mappable { &.mappable {
@ -273,11 +269,26 @@ const getIconBySchemaType = (type: Schema['type']): string => {
} }
.label { .label {
display: flex;
min-width: 0;
align-items: center;
> span { > span {
display: flex;
align-items: center;
margin-left: var(--spacing-3xs); margin-left: var(--spacing-3xs);
padding-left: var(--spacing-3xs); padding-left: var(--spacing-3xs);
border-left: 1px solid var(--color-foreground-light); border-left: 1px solid var(--color-foreground-light);
overflow: hidden;
span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
&.arrayIndex { &.arrayIndex {
border: 0; border: 0;
padding-left: 0; padding-left: 0;