fix: Minor updates to custom instance roles (#33520)

packages/frontend/@n8n/design-system/src/v2/components/Select/Select.vue

@@ -306,6 +306,7 @@ const groups = computed<SelectItemProps[]>(() => {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
+	min-width: 0;
 }
 
 .selectItem {

packages/frontend/editor-ui/src/features/roles/components/RoleSelectDropdown.vue

@@ -190,9 +190,10 @@ const isUnavailableRoleItem = (item: SelectItemProps) => item.requiresUpgrade ==
 					:content="selectedRole?.displayName"
 					:disabled="!selectedRole || dropdownOpen"
 					placement="top"
+					as-child
 				>
 					<span :class="$style.triggerContent">
-						{{ selectedRole?.displayName }}
+						<span :class="$style.triggerLabel">{{ selectedRole?.displayName }}</span>
 						<N8nIcon v-if="loading" icon="spinner" spin size="small" />
 					</span>
 				</N8nTooltip>
@@ -293,7 +294,9 @@ const isUnavailableRoleItem = (item: SelectItemProps) => item.requiresUpgrade ==
 
 <style lang="scss" module>
 .container {
-	display: inline-block;
+	display: inline-flex;
+	min-width: 0;
+	overflow: hidden;
 }
 
 .searchContainer {
@@ -313,6 +316,7 @@ const isUnavailableRoleItem = (item: SelectItemProps) => item.requiresUpgrade ==
 	background-color: transparent;
 	min-height: auto;
 	max-width: 200px;
+	overflow: hidden;
 
 	&:not([data-disabled]):hover {
 		background-color: transparent;
@@ -324,10 +328,15 @@ const isUnavailableRoleItem = (item: SelectItemProps) => item.requiresUpgrade ==
 	align-items: center;
 	gap: var(--spacing--3xs);
 	font-size: var(--font-size--sm);
+	min-width: 0;
+	overflow: hidden;
+}
+
+.triggerLabel {
 	overflow: hidden;
 	text-overflow: ellipsis;
 	white-space: nowrap;
-	max-width: 180px;
+	min-width: 0;
 }
 
 .itemLabel {

packages/frontend/editor-ui/src/features/roles/instance/instanceRoleScopes.ts

@@ -37,6 +37,15 @@ export const INSTANCE_SCOPE_GROUPS = {
 			'logStreaming:manage', // Log Streaming
 			'ldap:manage', // LDAP
 			'otel:manage', // OpenTelemetry
+			'eventBusDestination:create', // Log Streaming
+			'eventBusDestination:read',
+			'eventBusDestination:update',
+			'eventBusDestination:delete',
+			'eventBusDestination:list',
+			'eventBusDestination:test',
+			'variable:list',
+			'variable:read',
+			'dataTable:list',
 		],
 	},
 	user: {

packages/frontend/editor-ui/src/features/settings/users/components/SettingsUsersRoleCell.vue

@@ -126,7 +126,7 @@ const onLegacyActionSelect = (role: string) => {
 			@update:role="onRoleUpdate"
 			@system-role-upgrade-needed="upgradeModalVisible = true"
 		/>
-		<span v-else>{{ selectedRole?.displayName }}</span>
+		<span v-else :class="$style.roleName">{{ selectedRole?.displayName }}</span>
 		<CustomRolesUpgradeModal v-model="upgradeModalVisible" />
 	</div>
 
@@ -158,7 +158,7 @@ const onLegacyActionSelect = (role: string) => {
 				</ElRadio>
 			</template>
 		</N8nActionDropdown>
-		<span v-else>{{ legacyRoleLabel }}</span>
+		<span v-else :class="$style.roleName">{{ legacyRoleLabel }}</span>
 	</div>
 </template>
 
@@ -168,6 +168,15 @@ const onLegacyActionSelect = (role: string) => {
 	display: contents;
 }
 
+/* Non-editable role name — truncates so it doesn't overflow the adjacent column */
+.roleName {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 200px;
+}
+
 /* Legacy design */
 .roleLabel {
 	display: inline-flex;

packages/frontend/editor-ui/src/features/settings/users/components/SettingsUsersTable.vue

@@ -55,6 +55,7 @@ const headers = ref<Array<TableHeader<Item>>>([
 	{
 		title: i18n.baseText('settings.users.table.header.accountType'),
 		key: 'role',
+		width: 200,
 	},
 	{
 		title: i18n.baseText('settings.users.table.header.lastActive'),
@@ -168,7 +169,9 @@ const onRoleChange = ({ role, userId }: { role: string; userId: string }) => {
 					:loading="props.updatingRoleUserId === item.id"
 					@update:role="onRoleChange"
 				/>
-				<N8nText v-else color="text-dark">{{ roles[item.role ?? ROLE.Default]?.label }}</N8nText>
+				<N8nText v-else color="text-dark" :class="$style.roleName">{{
+					roles[item.role ?? ROLE.Default]?.label
+				}}</N8nText>
 			</template>
 			<template #[`item.lastActiveAt`]="{ item }">
 				<SettingsUsersLastActiveCell :data="item" />
@@ -186,3 +189,13 @@ const onRoleChange = ({ role, userId }: { role: string; userId: string }) => {
 		</N8nDataTableServer>
 	</div>
 </template>
+
+<style lang="scss" module>
+.roleName {
+	display: block;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 200px;
+}
+</style>