Show technical names in data model settings

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

@@ -56,8 +56,9 @@
 							meta: item.collection.startsWith('directus_'),
 							unmanaged: item.managed === false && item.collection.startsWith('directus_') === false,
 						}"
+						v-tooltip="item.name"
 					>
-						{{ item.name }}
+						{{ item.collection }}
 					</span>
 				</template>
 
@@ -218,6 +219,10 @@ export default defineComponent({
 	vertical-align: baseline;
 }
 
+.collection {
+	font-family: var(--family-monospace);
+}
+
 .hidden {
 	color: var(--foreground-subdued);
 }

app/src/modules/settings/routes/data-model/fields/components/field-select.vue

@@ -8,8 +8,8 @@
 					</template>
 
 					<template #input>
-						<div class="name">
-							{{ field.name }}
+						<div class="label">
+							<span class="name" v-tooltip="field.name">{{ field.field }}</span>
 							<span class="interface">{{ interfaceName }}</span>
 						</div>
 					</template>
@@ -314,9 +314,13 @@ export default defineComponent({
 }
 
 .field {
-	.name {
+	.label {
 		flex-grow: 1;
 
+		.name {
+			font-family: var(--family-monospace);
+		}
+
 		.interface {
 			display: none;
 			margin-left: 4px;
@@ -331,7 +335,7 @@ export default defineComponent({
 	}
 
 	&:hover {
-		.name {
+		.label {
 			.interface {
 				opacity: 1;
 			}