Repository: directus/directus
File: app/src/modules/content/routes/item.vue (Vue)

Code before:
					v-if="collectionInfo.meta && collectionInfo.meta.singleton === true"
					:items="[{ name: $t('content'), to: '/content' }]"
					class="headline-breadcrumb"
				/>
				<VBreadcrumb v-else :items="breadcrumb" class="headline-breadcrumb" />

				<VersionMenu
					v-if="shouldShowVersioning"
					:collection="collection"
					:primary-key="internalPrimaryKey!"
					:update-allowed="updateAllowed"
					:has-edits="hasEdits"
					:current-version="currentVersion"
					:versions="versions"
					@add="addVersion"
					@update="updateVersion"
					@delete="deleteVersion"
					@switch="currentVersion = $event"
				/>
			</div>
		</template>

		<template #actions>
			<VButton
				v-if="previewUrl"
				v-tooltip.bottom="$t(livePreviewMode === null ? 'live_preview.enable' : 'live_preview.disable')"
				rounded
				icon
				class="action-preview"
				:secondary="livePreviewMode === null"
				small
				@click="livePreviewCollapsed = !livePreviewCollapsed"
			>
				<VIcon name="visibility" outline small />
			</VButton>

			<VDialog
				v-if="!isNew && currentVersion === null"
				v-model="confirmDelete"
				:disabled="deleteAllowed === false"
				@esc="confirmDelete = false"
				@apply="deleteAndQuit"
			>
				<template #activator="{ on }">
					<VButton
						v-if="collectionInfo.meta && collectionInfo.meta.singleton === false"
						v-tooltip.bottom="deleteAllowed ? $t('delete_label') : $t('not_allowed')"
						rounded
						icon
						class="action-delete"
						secondary

Review comment (suggestion):
Other than initially discussed, let’s use `HeaderCollab` inside the `#actions` slot since this works better on smaller screens. Note, that we need to add `align-self: center` styles.

```suggestion
		<template #actions>
			<HeaderCollab :model-value="collabUsers" :connected />

			<VButton
```

Code after:
					v-if="collectionInfo.meta && collectionInfo.meta.singleton === true"
					:items="[{ name: $t('content'), to: '/content' }]"
					class="headline-breadcrumb"
				/>
				<VBreadcrumb v-else :items="breadcrumb" class="headline-breadcrumb" />

				<VersionMenu
					v-if="shouldShowVersioning"
					:collection="collection"
					:primary-key="internalPrimaryKey!"
					:update-allowed="updateAllowed"
					:has-edits="hasEdits"
					:current-version="currentVersion"
					:versions="versions"
					@add="addVersion"
					@update="updateVersion"
					@delete="deleteVersion"
					@switch="currentVersion = $event"
				/>
			</div>
		</template>

		<template #actions>
			<CollabAvatars :model-value="collabUsers" :connected="connected" />

			<VButton
				v-if="previewUrl"
				v-tooltip.bottom="$t(livePreviewMode === null ? 'live_preview.enable' : 'live_preview.disable')"
				rounded
				icon
				class="action-preview"
				:secondary="livePreviewMode === null"
				small
				@click="livePreviewCollapsed = !livePreviewCollapsed"
			>
				<VIcon name="visibility" outline small />
			</VButton>

			<VDialog
				v-if="!isNew && currentVersion === null"
				v-model="confirmDelete"
				:disabled="deleteAllowed === false"
				@esc="confirmDelete = false"
				@apply="deleteAndQuit"
			>
				<template #activator="{ on }">
					<VButton
						v-if="collectionInfo.meta && collectionInfo.meta.singleton === false"
						v-tooltip.bottom="deleteAllowed ? $t('delete_label') : $t('not_allowed')"
						rounded
						icon