Fix thumbnail overflow in render-template (#15115)

* fix thumbnail overflow in render-template

* new fix for render-template thumbnail in table

* fix thumbnail not working in page titles

* prevent thumbnail overflow in page title

app/src/components/v-table/table-row.vue

@@ -67,12 +67,17 @@ const props = withDefaults(defineProps<Props>(), {
 
 defineEmits(['click', 'item-selected']);
 
-const cssHeight = computed(() => props.height + 2 + 'px');
+const cssHeight = computed(() => {
+	return {
+		tableRow: props.height + 2 + 'px',
+		renderTemplateImage: props.height - 16 + 'px',
+	};
+});
 </script>
 
 <style lang="scss" scoped>
 .table-row {
-	height: v-bind(cssHeight);
+	height: v-bind('cssHeight.tableRow');
 
 	.cell {
 		display: flex;
@@ -120,5 +125,13 @@ const cssHeight = computed(() => props.height + 2 + 'px');
 		align-items: center;
 		justify-content: flex-end;
 	}
+
+	:deep(.render-template) {
+		height: v-bind('cssHeight.tableRow');
+
+		img {
+			height: v-bind('cssHeight.renderTemplateImage');
+		}
+	}
 }
 </style>

app/src/composables/use-template-data.ts

@@ -1,5 +1,6 @@
 import api from '@/api';
 import { Collection } from '@/types/collections';
+import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
 import { getFieldsFromTemplate } from '@directus/shared/utils';
 import { computed, Ref, ref, watch } from 'vue';
 
@@ -16,7 +17,10 @@ export function useTemplateData(collection: Ref<Collection | null>, primaryKey:
 
 	const fields = computed(() => {
 		if (!collection.value?.meta?.display_template) return null;
-		return getFieldsFromTemplate(collection.value.meta.display_template);
+		return adjustFieldsForDisplays(
+			getFieldsFromTemplate(collection.value.meta.display_template),
+			collection.value?.collection
+		);
 	});
 
 	watch([collection, primaryKey], fetchTemplateValues, { immediate: true });

app/src/views/private/components/header-bar.vue

@@ -170,6 +170,14 @@ export default defineComponent({
 				white-space: nowrap;
 				text-overflow: ellipsis;
 			}
+
+			:deep(.type-title) {
+				.render-template {
+					img {
+						height: 24px;
+					}
+				}
+			}
 		}
 	}