Repository: directus/directus
File: app/src/modules/content/components/version-menu.vue (Vue)

Code before:
}

async function onPromoteComplete(deleteOnPromote: boolean) {
	isVersionPromoteDrawerOpen.value = false;

	if (deleteOnPromote) {
		await deleteVersion();
	} else {
		emit('switch', null);
	}
}
</script>

<template>
	<div class="version-menu-wrapper">
		<v-menu class="version-menu" placement="bottom-start" show-arrow>
			<template #activator="{ toggle }">
				<button secondary rounded class="version-button" :class="{ main: currentVersion === null }" @click="toggle">
					<div class="version-current">
						<v-icon class="version-icon" name="history" />
						<span class="version-name">
							<v-text-overflow
								:text="currentVersion ? getVersionDisplayName(currentVersion) : t('main_version')"
								placement="bottom"
							/>
						</span>

						<v-icon small name="arrow_drop_down" />
					</div>
				</button>
			</template>

			<v-list>
				<v-list-item class="version-item" clickable :active="currentVersion === null" @click="switchVersion(null)">
					{{ t('main_version') }}
				</v-list-item>

				<v-list-item
					v-for="versionItem of versions"
					:key="versionItem.id"
					class="version-item"
					clickable
					:active="versionItem.id === currentVersion?.id"
					@click="switchVersion(versionItem)"
				>
					{{ getVersionDisplayName(versionItem) }}
				</v-list-item>

				<template v-if="createVersionsAllowed">
					<v-divider />


Review comment (bug):
We could remove the `span.version-name` and apply the class `.version-name` directly to the `<v-text-overflow>` component.

```suggestion
                        <v-text-overflow
                            class="version-name">
                            :text="currentVersion ? getVersionDisplayName(currentVersion) : t('main_version')"
                            placement="bottom"
                        />
```

Code after:
}

async function onPromoteComplete(deleteOnPromote: boolean) {
	isVersionPromoteDrawerOpen.value = false;

	if (deleteOnPromote) {
		await deleteVersion();
	} else {
		emit('switch', null);
	}
}
</script>

<template>
	<div class="version-menu-wrapper">
		<v-menu class="version-menu" placement="bottom-start" show-arrow>
			<template #activator="{ toggle }">
				<button class="version-button" type="button" @click="toggle">
					<v-icon name="published_with_changes" />
					<v-text-overflow
						class="version-name"
						:text="currentVersion ? getVersionDisplayName(currentVersion) : t('main_version')"
						placement="bottom"
					/>
					<v-icon small name="arrow_drop_down" />
				</button>
			</template>

			<v-list>
				<v-list-item class="version-item" clickable :active="currentVersion === null" @click="switchVersion(null)">
					{{ t('main_version') }}
				</v-list-item>

				<v-list-item
					v-for="versionItem of versions"
					:key="versionItem.id"
					class="version-item"
					clickable
					:active="versionItem.id === currentVersion?.id"
					@click="switchVersion(versionItem)"
				>
					{{ getVersionDisplayName(versionItem) }}
				</v-list-item>

				<template v-if="createVersionsAllowed">
					<v-divider />

					<v-list-item clickable @click="createDialogActive = true">
						{{ t('create_version') }}
					</v-list-item>
				</template>