Relational consistency (#4093)

Co-authored-by: rijkvanzanten <rijkvanzanten@me.com>

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

@@ -1,6 +1,5 @@
 <template>
 	<div>
-
 		<div class="form">
 			<div class="field half-left" v-if="fieldData.meta">
 				<div class="label type-label">{{ $t('readonly') }}</div>
@@ -21,7 +20,7 @@
 				<div class="label type-label">{{ $t('field_name_translations') }}</div>
 				<interface-repeater
 					v-model="fieldData.meta.translations"
-					:template="'{{ translation }} ({{ language }})'"
+					:template="'[{{ language }}] {{ translation }}'"
 					:fields="[
 						{
 							field: 'language',
@@ -30,6 +29,11 @@
 							meta: {
 								interface: 'system-language',
 								width: 'half',
+								display: 'formatted-value',
+								display_options: {
+									font: 'monospace',
+									color: 'var(--foreground-subdued)',
+								},
 							},
 							schema: {
 								default_value: 'en-US',
@@ -55,10 +59,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, computed } from '@vue/composition-api';
-import useSync from '@/composables/use-sync';
-import { types } from '@/types';
-import i18n from '@/lang';
+import { defineComponent } from '@vue/composition-api';
 import { state } from '../store';
 
 export default defineComponent({