refactor(editor): Fix small style nits in Agents (#30222)

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: {

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 });
 			<EditablePreview
 				data-test-id="inline-edit-preview"
 				:class="$style.inlineRenamePreview"
-				:style="computedInlineStyles"
+				:style="computedContentStyles"
 			/>
 			<!-- Stop propagation for space key to prevent VueFlow from intercepting it -->
 			<!-- when modifier keys (like Shift) are pressed. See: https://github.com/bcakmakoglu/vue-flow/issues/1999 -->
@@ -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
 			/>

packages/frontend/@n8n/design-system/src/components/N8nInlineTextEdit/__snapshots__/InlineTextEdit.test.ts.snap

@@ -2,8 +2,8 @@
 
 exports[`N8nInlineTextEdit > should render correctly 1`] = `
 "<div class="inlineRenameRoot" title="Test Value" dir="ltr" data-dismissable-layer="">
-  <div data-placeholder-shown="" style="display: inline-grid; width: 64px; max-width: 200px; z-index: 1;" class="inlineRenameArea" data-test-id="inline-editable-area"><span class="measureSpan">Test Value</span><span tabindex="0" data-placeholder-shown="" style="white-space: pre; user-select: none; grid-area: 1 / 1 / auto / auto; overflow: hidden; text-overflow: ellipsis; width: 64px; max-width: 200px; z-index: 1;" data-test-id="inline-edit-preview" class="inlineRenamePreview">Test Value</span><!-- Stop propagation for space key to prevent VueFlow from intercepting it -->
-    <!-- when modifier keys (like Shift) are pressed. See: https://github.com/bcakmakoglu/vue-flow/issues/1999 --><input placeholder="Enter text..." maxlength="100" aria-label="editable input" style="all: unset; grid-area: 1 / 1 / auto / auto; visibility: hidden; width: 64px; max-width: 200px; z-index: 1;" class="inlineRenameInput" data-test-id="inline-edit-input" value="Test Value">
+  <div data-placeholder-shown="" style="display: inline-grid; width: 64px; max-width: 200px; z-index: 1;" class="inlineRenameArea" data-test-id="inline-editable-area"><span class="measureSpan">Test Value</span><span tabindex="0" data-placeholder-shown="" style="white-space: pre; user-select: none; grid-area: 1 / 1 / auto / auto; overflow: hidden; text-overflow: ellipsis; width: 100%; max-width: 100%; z-index: 1;" data-test-id="inline-edit-preview" class="inlineRenamePreview">Test Value</span><!-- Stop propagation for space key to prevent VueFlow from intercepting it -->
+    <!-- when modifier keys (like Shift) are pressed. See: https://github.com/bcakmakoglu/vue-flow/issues/1999 --><input placeholder="Enter text..." maxlength="100" aria-label="editable input" style="all: unset; grid-area: 1 / 1 / auto / auto; visibility: hidden; width: 100%; max-width: 100%; z-index: 1;" class="inlineRenameInput" data-test-id="inline-edit-input" value="Test Value">
   </div>
   <!--v-if-->
 </div>"

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 {

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);
 }
 </style>