Don't wrap text in nav (#4035)

* Move v-list-item-text to v-text-overflow, use in tables

* Fix type issue

app/src/modules/activity/components/navigation.vue

@@ -5,7 +5,7 @@
 				<v-icon name="access_time" />
 			</v-list-item-icon>
 			<v-list-item-content>
-				{{ $t('all_activity') }}
+				<v-text-overflow :text="$t('all_activity')" />
 			</v-list-item-content>
 		</v-list-item>
 
@@ -17,7 +17,7 @@
 				<v-icon name="face" />
 			</v-list-item-icon>
 			<v-list-item-content>
-				{{ $t('my_activity') }}
+				<v-text-overflow :text="$t('my_activity')" />
 			</v-list-item-content>
 		</v-list-item>
 
@@ -31,7 +31,7 @@
 				<v-icon name="add" />
 			</v-list-item-icon>
 			<v-list-item-content>
-				{{ $t('create') }}
+				<v-text-overflow :text="$t('create')" />
 			</v-list-item-content>
 		</v-list-item>
 
@@ -43,7 +43,7 @@
 				<v-icon name="check" />
 			</v-list-item-icon>
 			<v-list-item-content>
-				{{ $t('update') }}
+				<v-text-overflow :text="$t('update')" />
 			</v-list-item-content>
 		</v-list-item>
 
@@ -55,7 +55,7 @@
 				<v-icon name="clear" />
 			</v-list-item-icon>
 			<v-list-item-content>
-				{{ $t('delete') }}
+				<v-text-overflow :text="$t('delete')" />
 			</v-list-item-content>
 		</v-list-item>
 
@@ -67,7 +67,7 @@
 				<v-icon name="chat_bubble_outline" />
 			</v-list-item-icon>
 			<v-list-item-content>
-				{{ $t('comment') }}
+				<v-text-overflow :text="$t('comment')" />
 			</v-list-item-content>
 		</v-list-item>
 
@@ -79,7 +79,7 @@
 				<v-icon name="login" />
 			</v-list-item-icon>
 			<v-list-item-content>
-				{{ $t('login') }}
+				<v-text-overflow :text="$t('login')" />
 			</v-list-item-content>
 		</v-list-item>
 	</v-list>

app/src/modules/collections/components/navigation-bookmark.vue

@@ -1,7 +1,9 @@
 <template>
 	<v-list-item exact :to="bookmark.to" class="bookmark" @contextmenu.native.prevent.stop="$refs.contextMenu.activate">
 		<v-list-item-icon><v-icon name="bookmark" /></v-list-item-icon>
-		<v-list-item-content>{{ bookmark.bookmark }}</v-list-item-content>
+		<v-list-item-content>
+			<v-text-overflow :text="bookmark.bookmark" />
+		</v-list-item-content>
 		<v-list-item-icon v-if="bookmark.scope !== 'user'" class="bookmark-scope">
 			<v-icon :name="bookmark.scope === 'role' ? 'people' : 'public'" />
 		</v-list-item-icon>
@@ -13,7 +15,7 @@
 						<v-icon name="edit" outline />
 					</v-list-item-icon>
 					<v-list-item-content>
-						{{ $t('rename_bookmark') }}
+						<v-text-overflow :text="$t('rename_bookmark')" />
 					</v-list-item-content>
 				</v-list-item>
 				<v-list-item @click="deleteActive = true" class="danger" :disabled="isMine === false">
@@ -21,7 +23,7 @@
 						<v-icon name="delete" outline />
 					</v-list-item-icon>
 					<v-list-item-content>
-						{{ $t('delete_bookmark') }}
+						<v-text-overflow :text="$t('delete_bookmark')" />
 					</v-list-item-content>
 				</v-list-item>
 			</v-list>

app/src/modules/collections/components/navigation.vue

@@ -7,7 +7,9 @@
 				>
 					<v-list-item :exact="exact" v-for="navItem in group.items" :key="navItem.to" :to="navItem.to">
 						<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
-						<v-list-item-content>{{ navItem.name }}</v-list-item-content>
+						<v-list-item-content>
+							<v-text-overflow :text="navItem.name" />
+						</v-list-item-content>
 					</v-list-item>
 				</template>
 				<template v-else>
@@ -21,7 +23,9 @@
 					>
 						<v-list-item :exact="exact" v-for="navItem in group.items" :key="navItem.to" :to="navItem.to">
 							<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
-							<v-list-item-content>{{ navItem.name }}</v-list-item-content>
+							<v-list-item-content>
+								<v-text-overflow :text="navItem.name" />
+							</v-list-item-content>
 						</v-list-item>
 					</v-detail>
 				</template>
@@ -30,7 +34,9 @@
 
 		<v-list-item v-else :exact="exact" v-for="navItem in navItems" :key="navItem.to" :to="navItem.to">
 			<v-list-item-icon><v-icon :name="navItem.icon" /></v-list-item-icon>
-			<v-list-item-content>{{ navItem.name }}</v-list-item-content>
+			<v-list-item-content>
+				<v-text-overflow :text="navItem.name" />
+			</v-list-item-content>
 		</v-list-item>
 
 		<template v-if="bookmarks.length > 0">

app/src/modules/docs/components/navigation-item.vue

@@ -4,7 +4,7 @@
 		<template #activator>
 			<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-text>{{ section.name }}</v-list-item-text>
+				<v-text-overflow :text="section.name" />
 			</v-list-item-content>
 		</template>
 
@@ -22,7 +22,7 @@
 	<v-list-item v-else :to="`/docs${section.to}`" :dense="dense" :value="section.to">
 		<v-list-item-icon v-if="section.icon !== undefined"><v-icon :name="section.icon" /></v-list-item-icon>
 		<v-list-item-content>
-			<v-list-item-text>{{ section.name }}</v-list-item-text>
+			<v-text-overflow :text="section.name" />
 		</v-list-item-content>
 	</v-list-item>
 </template>

app/src/modules/files/components/navigation-folder.vue

@@ -8,7 +8,9 @@
 			@contextmenu.native.prevent.stop="$refs.contextMenu.activate"
 		>
 			<v-list-item-icon><v-icon name="folder" /></v-list-item-icon>
-			<v-list-item-content>{{ folder.name }}</v-list-item-content>
+			<v-list-item-content>
+				<v-text-overflow :text="folder.name" />
+			</v-list-item-content>
 		</v-list-item>
 
 		<v-list-group
@@ -25,7 +27,9 @@
 				<v-list-item-icon>
 					<v-icon name="folder" />
 				</v-list-item-icon>
-				<v-list-item-content>{{ folder.name }}</v-list-item-content>
+				<v-list-item-content>
+					<v-text-overflow :text="folder.name" />
+				</v-list-item-content>
 			</template>
 
 			<navigation-folder
@@ -44,7 +48,7 @@
 						<v-icon name="edit" outline />
 					</v-list-item-icon>
 					<v-list-item-content>
-						{{ $t('rename_folder') }}
+						<v-text-overflow :text="$t('rename_folder')" />
 					</v-list-item-content>
 				</v-list-item>
 				<v-list-item @click="moveActive = true">
@@ -52,7 +56,7 @@
 						<v-icon name="folder_move" />
 					</v-list-item-icon>
 					<v-list-item-content>
-						{{ $t('move_to_folder') }}
+						<v-text-overflow :text="$t('move_to_folder')" />
 					</v-list-item-content>
 				</v-list-item>
 				<v-list-item @click="deleteActive = true">
@@ -60,7 +64,7 @@
 						<v-icon name="delete" outline />
 					</v-list-item-icon>
 					<v-list-item-content>
-						{{ $t('delete_folder') }}
+						<v-text-overflow :text="$t('delete_folder')" />
 					</v-list-item-content>
 				</v-list-item>
 			</v-list>

app/src/modules/files/components/navigation.vue

@@ -13,7 +13,9 @@
 						<v-list-item-icon>
 							<v-icon name="folder_special" outline />
 						</v-list-item-icon>
-						<v-list-item-content>{{ $t('file_library') }}</v-list-item-content>
+						<v-list-item-content>
+							<v-text-overflow :text="$t('file_library')" />
+						</v-list-item-content>
 					</template>
 
 					<navigation-folder
@@ -30,17 +32,23 @@
 
 		<v-list-item to="/files/all" exact>
 			<v-list-item-icon><v-icon name="file_copy" outline /></v-list-item-icon>
-			<v-list-item-content>{{ $t('all_files') }}</v-list-item-content>
+			<v-list-item-content>
+				<v-text-overflow :text="$t('all_files')" />
+			</v-list-item-content>
 		</v-list-item>
 
 		<v-list-item to="/files/mine" exact>
 			<v-list-item-icon><v-icon name="folder_shared" /></v-list-item-icon>
-			<v-list-item-content>{{ $t('my_files') }}</v-list-item-content>
+			<v-list-item-content>
+				<v-text-overflow :text="$t('my_files')" />
+			</v-list-item-content>
 		</v-list-item>
 
 		<v-list-item to="/files/recent" exact>
 			<v-list-item-icon><v-icon name="history" /></v-list-item-icon>
-			<v-list-item-content>{{ $t('recent_files') }}</v-list-item-content>
+			<v-list-item-content>
+				<v-text-overflow :text="$t('recent_files')" />
+			</v-list-item-content>
 		</v-list-item>
 	</v-list>
 </template>

app/src/modules/settings/components/navigation.vue

@@ -3,7 +3,7 @@
 		<v-list-item v-for="item in navItems" :to="item.to" :key="item.to">
 			<v-list-item-icon><v-icon :name="item.icon" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-text>{{ item.name }}</v-list-item-text>
+				<v-text-overflow :text="item.name" />
 			</v-list-item-content>
 		</v-list-item>
 
@@ -12,14 +12,14 @@
 		<v-list-item v-for="item in externalItems" :href="item.href" :key="item.href">
 			<v-list-item-icon><v-icon :name="item.icon" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-text>{{ item.name }}</v-list-item-text>
+				<v-text-overflow :text="item.name" />
 			</v-list-item-content>
 		</v-list-item>
 
 		<v-list-item href="https://github.com/directus/directus/releases" class="version">
 			<v-list-item-icon><v-icon name="directus" /></v-list-item-icon>
 			<v-list-item-content>
-				<v-list-item-text class="version">Directus {{ version }}</v-list-item-text>
+				<v-text-overflow class="version" :text="`Directus ${version}`" />
 			</v-list-item-content>
 		</v-list-item>
 	</v-list>
@@ -103,7 +103,7 @@ Node: ${parsedInfo.value?.node.version}
 		color: var(--foreground-subdued);
 		transition: color var(--fast) var(--transition);
 	}
-	::v-deep .v-list-item-text {
+	::v-deep .v-text-overflow {
 		color: var(--foreground-subdued);
 		transition: color var(--fast) var(--transition);
 	}
@@ -111,7 +111,7 @@ Node: ${parsedInfo.value?.node.version}
 		.v-icon {
 			color: var(--foreground-normal-alt);
 		}
-		::v-deep .v-list-item-text {
+		::v-deep .v-text-overflow {
 			color: var(--foreground-normal-alt);
 		}
 	}

app/src/modules/settings/routes/data-model/collections/collections.vue

@@ -49,17 +49,15 @@
 				</template>
 
 				<template #item.name="{ item }">
-					<span
+					<v-text-overflow
 						class="collection"
 						:class="{
 							hidden: (item.meta && item.meta.hidden) || false,
 							system: item.collection.startsWith('directus_'),
 							unmanaged: item.meta === null && item.collection.startsWith('directus_') === false,
 						}"
-						v-tooltip="item.name"
-					>
-						{{ item.collection }}
-					</span>
+						:text="item.collection"
+					/>
 				</template>
 
 				<template #item.note="{ item }">