fix(editor): Vue3 - Fix modal positioning and multi-select tag sizing (#6783)

* ✨ Updating modals positioning within the overlay
* 💄 Implemented multi-select variant with small tabs
* ✔️ Removing password link clicks while modal is open in e2e tests
* Set generous timeout for $paramter resolve
Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
---------
Signed-off-by: Oleg Ivaniv <me@olegivaniv.com>
Co-authored-by: Oleg Ivaniv <me@olegivaniv.com>

packages/design-system/src/components/N8nFormInput/FormInput.vue

@@ -33,6 +33,7 @@
 		<div :class="showErrors ? $style.errorInput : ''" @keydown.stop @keydown.enter="onEnter">
 			<slot v-if="hasDefaultSlot" />
 			<n8n-select
+				:class="{ [$style.multiSelectSmallTags]: tagSize === 'small' }"
 				v-else-if="type === 'select' || type === 'multi-select'"
 				:modelValue="modelValue"
 				:placeholder="placeholder"
@@ -50,6 +51,7 @@
 					:key="option.value"
 					:value="option.value"
 					:label="option.label"
+					size="small"
 				/>
 			</n8n-select>
 			<n8n-input
@@ -127,6 +129,7 @@ export interface Props {
 	inactiveLabel?: string;
 	inactiveColor?: string;
 	teleported?: boolean;
+	tagSize?: 'small' | 'medium';
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -136,6 +139,7 @@ const props = withDefaults(defineProps<Props>(), {
 	showRequiredAsterisk: true,
 	validateOnBlur: true,
 	teleported: true,
+	tagSize: 'small',
 });
 
 const emit = defineEmits<{
@@ -268,4 +272,12 @@ defineExpose({ inputRef });
 .errorInput {
 	--input-border-color: var(--color-danger);
 }
+
+.multiSelectSmallTags {
+	:global(.el-tag) {
+		height: 24px;
+		padding: 0 8px;
+		line-height: 22px;
+	}
+}
 </style>

packages/design-system/src/components/N8nFormInputs/FormInputs.vue

@@ -26,6 +26,7 @@
 						:data-test-id="input.name"
 						:showValidationWarnings="showValidationWarnings"
 						:teleported="teleported"
+						:tagSize="tagSize"
 						@update:modelValue="(value) => onUpdateModelValue(input.name, value)"
 						@validate="(value) => onValidate(input.name, value)"
 						@enter="onSubmit"
@@ -73,6 +74,11 @@ export default defineComponent({
 			type: Boolean,
 			default: true,
 		},
+		tagSize: {
+			type: String,
+			default: 'small',
+			validator: (value: string): boolean => ['small', 'medium'].includes(value),
+		},
 	},
 	data() {
 		return {