fix(core): Fix change in width of all dropdowns in UI (#34249)

packages/frontend/@n8n/design-system/src/components/N8nAiModelSelectorDropdown/AiModelSelectorDropdown.vue

@@ -105,6 +105,7 @@ defineExpose({
 		placement="bottom-start"
 		teleported
 		searchable
+		width="var(--reka-dropdown-menu-trigger-width)"
 		@select="handleSelect"
 	>
 		<template #trigger>

packages/frontend/@n8n/design-system/src/components/N8nDropdownMenu/DropdownMenu.test.ts

@@ -512,6 +512,33 @@ describe('N8nDropdownMenu', () => {
 		});
 	});
 
+	describe('width prop', () => {
+		it('should default the content width to 24rem', async () => {
+			render(DropdownMenu, {
+				props: {
+					items: createItems(3),
+					modelValue: true,
+				},
+			});
+
+			const { dropdown } = await getDropdownContent();
+			expect(dropdown).toHaveStyle({ '--n8n--dropdown-menu-width': '24rem' });
+		});
+
+		it('should apply a custom width value', async () => {
+			render(DropdownMenu, {
+				props: {
+					items: createItems(3),
+					modelValue: true,
+					width: '10rem',
+				},
+			});
+
+			const { dropdown } = await getDropdownContent();
+			expect(dropdown).toHaveStyle({ '--n8n--dropdown-menu-width': '10rem' });
+		});
+	});
+
 	describe('teleported prop', () => {
 		it('should teleport to body by default', async () => {
 			const { container } = render(DropdownMenu, {

packages/frontend/@n8n/design-system/src/components/N8nDropdownMenu/DropdownMenu.types.ts

@@ -89,6 +89,8 @@ export interface DropdownMenuProps<T = string, D = never> {
 	teleported?: boolean;
 	/** Maximum height of the dropdown menu */
 	maxHeight?: string | number;
+	/** Maximum width of the dropdown menu. */
+	width?: string;
 	/** Whether to show loading state */
 	loading?: boolean;
 	/** Number of skeleton items to show when loading */

packages/frontend/@n8n/design-system/src/components/N8nDropdownMenu/DropdownMenu.vue

@@ -35,6 +35,7 @@ const props = withDefaults(defineProps<DropdownMenuProps<T, D>>(), {
 	searchPlaceholder: 'Search...',
 	searchDebounce: 0,
 	emptyText: 'No items',
+	width: '24rem',
 });
 
 const emit = defineEmits<{
@@ -72,12 +73,17 @@ const placementParts = computed(() => {
 });
 
 const contentContainerStyle = computed(() => {
-	if (props.maxHeight) {
-		const maxHeightValue =
-			typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight;
-		return { maxHeight: maxHeightValue, overflowY: 'auto' };
-	}
-	return {};
+	const maxHeightStyle = props.maxHeight
+		? {
+				maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight,
+				overflowY: 'auto',
+			}
+		: {};
+
+	return {
+		'--n8n--dropdown-menu-width': props.width,
+		...maxHeightStyle,
+	};
 });
 
 const handleOpenChange = (open: boolean) => {
@@ -364,7 +370,6 @@ defineExpose({ open, close });
 	--n8n--dropdown--offset--origin-y: center;
 	--animation--popover-in--translate-x: var(--n8n--dropdown--offset--slide-x);
 	--animation--popover-in--translate-y: var(--n8n--dropdown--offset--slide-y);
-	--n8n--dropdown-menu-width: var(--reka-dropdown-menu-trigger-width);
 	display: flex;
 	flex-direction: column;
 	width: fit-content;