diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.test.ts b/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.test.ts index 83c214c28d6..976d28c854e 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.test.ts +++ b/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.test.ts @@ -72,6 +72,32 @@ describe('N8nInlineTextEdit', () => { expect(preview).toHaveTextContent('New Value!'); }); + it('should support CSS length values for maxWidth', () => { + const wrapper = renderComponent({ + props: { + modelValue: 'Test Value', + maxWidth: '80%', + }, + }); + + const editableArea = wrapper.getByTestId('inline-editable-area'); + const preview = wrapper.getByTestId('inline-edit-preview'); + const input = wrapper.getByTestId('inline-edit-input'); + + expect(editableArea).toHaveStyle({ + width: 'clamp(64px, 1px, 80%)', + maxWidth: '80%', + }); + expect(preview).toHaveStyle({ + width: '100%', + maxWidth: '100%', + }); + expect(input).toHaveStyle({ + width: '100%', + maxWidth: '100%', + }); + }); + it('should not update on escape key press', async () => { const wrapper = renderComponent({ props: { diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.vue b/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.vue index 7294d760fbf..a1292027eb2 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.vue +++ b/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/InlineTextEdit.vue @@ -7,7 +7,7 @@ type Props = { modelValue: string; readOnly?: boolean; maxLength?: number; - maxWidth?: number; + maxWidth?: number | string; minWidth?: number; placeholder?: string; disabled?: boolean; @@ -41,15 +41,29 @@ watchEffect(() => { // Resize logic const { width: measuredWidth } = useElementSize(measureSpan); -const inputWidth = computed(() => - Math.max(props.minWidth, Math.min(measuredWidth.value + 1, props.maxWidth)), +const maxWidth = computed(() => + typeof props.maxWidth === 'number' ? `${props.maxWidth}px` : props.maxWidth, ); +const inputWidth = computed(() => { + const measuredContentWidth = `${measuredWidth.value + 1}px`; + + if (typeof props.maxWidth === 'number') { + return `${Math.max(props.minWidth, Math.min(measuredWidth.value + 1, props.maxWidth))}px`; + } + + return `clamp(${props.minWidth}px, ${measuredContentWidth}, ${props.maxWidth})`; +}); const computedInlineStyles = computed(() => ({ - width: `${inputWidth.value}px`, - maxWidth: `${props.maxWidth}px`, + width: inputWidth.value, + maxWidth: maxWidth.value, zIndex: 1, })); +const computedContentStyles = { + width: '100%', + maxWidth: '100%', + zIndex: 1, +}; function forceFocus() { if (editableRoot.value && !props.readOnly && !props.disabled) { @@ -117,7 +131,7 @@ defineExpose({ forceFocus, forceCancel }); @@ -125,7 +139,7 @@ defineExpose({ forceFocus, forceCancel }); ref="input" :class="$style.inlineRenameInput" data-test-id="inline-edit-input" - :style="computedInlineStyles" + :style="computedContentStyles" @input="onInput($event.target.value)" @keydown.space.stop /> diff --git a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/__snapshots__/InlineTextEdit.test.ts.snap b/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/__snapshots__/InlineTextEdit.test.ts.snap index 362b0db6d13..b644906a766 100644 --- a/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/__snapshots__/InlineTextEdit.test.ts.snap +++ b/packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/__snapshots__/InlineTextEdit.test.ts.snap @@ -2,8 +2,8 @@ exports[`N8nInlineTextEdit > should render correctly 1`] = ` "
-
Test ValueTest Value - +
Test ValueTest Value +
" diff --git a/packages/frontend/editor-ui/src/features/agents/components/AgentBuilderEditorColumn.vue b/packages/frontend/editor-ui/src/features/agents/components/AgentBuilderEditorColumn.vue index b013da22db6..606285033f2 100644 --- a/packages/frontend/editor-ui/src/features/agents/components/AgentBuilderEditorColumn.vue +++ b/packages/frontend/editor-ui/src/features/agents/components/AgentBuilderEditorColumn.vue @@ -218,6 +218,7 @@ const i18n = useI18n(); flex: 1; min-height: 0; width: 100%; + padding: var(--spacing--lg); } .agentCards { diff --git a/packages/frontend/editor-ui/src/features/agents/components/AgentIdentityHeader.vue b/packages/frontend/editor-ui/src/features/agents/components/AgentIdentityHeader.vue index f826f216e47..44c104aceb9 100644 --- a/packages/frontend/editor-ui/src/features/agents/components/AgentIdentityHeader.vue +++ b/packages/frontend/editor-ui/src/features/agents/components/AgentIdentityHeader.vue @@ -37,7 +37,7 @@ function onDescriptionUpdate(value: string) { :model-value="name" :placeholder="i18n.baseText('agents.builder.agent.name.placeholder')" :disabled="props.disabled" - :max-width="240" + max-width="80%" :min-width="96" :class="$style.title" data-testid="agent-name-inline-edit" @@ -47,7 +47,7 @@ function onDescriptionUpdate(value: string) { :model-value="description" :placeholder="i18n.baseText('agents.builder.agent.description.placeholder')" :disabled="props.disabled" - :max-width="240" + max-width="80%" :min-width="96" :class="$style.description" data-testid="agent-description-inline-edit" @@ -69,14 +69,13 @@ function onDescriptionUpdate(value: string) { font-size: var(--font-size--xl); font-weight: var(--font-weight--medium); line-height: var(--line-height--lg); - color: var(--text-color--dark); + color: var(--text-color); } .description { font-size: var(--font-size--sm); font-weight: var(--font-weight--regular); line-height: var(--line-height--md); - color: var(--text-color--light); - max-width: 100px; + color: var(--text-color--subtler); }