fix(editor): Fix an issue with overlapping elements in the Assignment component (#18041)

packages/frontend/editor-ui/src/components/AssignmentCollection/Assignment.test.ts

@@ -1,11 +1,14 @@
+import { computed, nextTick, ref } from 'vue';
 import { createComponentRenderer } from '@/__tests__/render';
 import { createTestingPinia } from '@pinia/testing';
 import userEvent from '@testing-library/user-event';
+import { fireEvent } from '@testing-library/vue';
 import Assignment from './Assignment.vue';
 import { defaultSettings } from '@/__tests__/defaults';
 import { STORES } from '@n8n/stores';
 import merge from 'lodash/merge';
 import { cleanupAppModals, createAppModals } from '@/__tests__/utils';
+import * as useResolvedExpression from '@/composables/useResolvedExpression';
 
 const DEFAULT_SETUP = {
 	pinia: createTestingPinia({
@@ -69,4 +72,22 @@ describe('Assignment.vue', () => {
 		// Check if the parameter input hint is not displayed
 		expect(() => getByTestId('parameter-input-hint')).toThrow();
 	});
+
+	it('should shorten the expression preview hint if options are on the bottom', async () => {
+		vi.spyOn(useResolvedExpression, 'useResolvedExpression').mockReturnValueOnce({
+			resolvedExpressionString: ref('foo'),
+			resolvedExpression: ref(null),
+			isExpression: computed(() => true),
+		});
+		const { getByTestId } = renderComponent();
+
+		const previewValue = getByTestId('parameter-expression-preview-value');
+
+		expect(previewValue).not.toHaveClass('optionsPadding');
+
+		await fireEvent.mouseEnter(getByTestId('assignment-value'));
+		await nextTick();
+
+		expect(previewValue).toHaveClass('optionsPadding');
+	});
 });