Fix cards layout in modal browse usage

app/src/displays/file/file.vue

@@ -18,17 +18,12 @@
 import { defineComponent, PropType, computed, ref } from '@vue/composition-api';
 import readableMimeType from '@/utils/readable-mime-type';
 import useElementSize from '@/composables/use-element-size';
+import getRootPath from '@/utils/get-root-path';
 
 type File = {
+	id: string;
 	type: string;
 	title: string;
-	data: {
-		asset_url: string;
-		thumbnails: {
-			key: string;
-			url: string;
-		}[];
-	};
 };
 
 export default defineComponent({
@@ -47,9 +42,9 @@ export default defineComponent({
 
 		const imageThumbnail = computed(() => {
 			if (!props.value) return null;
-			if (props.value.type.includes('svg')) return props.value.data.asset_url;
+			if (props.value.type.includes('svg')) return getRootPath() + `assets/${props.value.id}`;
 			if (props.value.type.includes('image') === false) return null;
-			return props.value.data.thumbnails?.find((thumb) => thumb.key === 'system-small-crop')?.url;
+			return getRootPath() + `assets/${props.value.id}?key=system-small-cover`;
 		});
 
 		const { height } = useElementSize(previewEl);

app/src/interfaces/files/files.vue

@@ -124,7 +124,7 @@ export default defineComponent({
 
 			const jf = relationCurrentToJunction.value.junction_field;
 
-			return ['id', 'data', 'type', 'title'].map((key) => `${jf}.${key}`);
+			return ['id', 'type', 'title'].map((key) => `${jf}.${key}`);
 		});
 
 		const tableHeaders = ref<TableHeader[]>([

app/src/layouts/cards/cards.vue

@@ -217,9 +217,7 @@ export default defineComponent({
 		const { collection, searchQuery } = toRefs(props);
 		const { info, primaryKeyField, fields: fieldsInCollection } = useCollection(collection);
 
-		const availableFields = computed(() =>
-			fieldsInCollection.value.filter((field) => field.meta.hidden !== true)
-		);
+		const availableFields = computed(() => fieldsInCollection.value.filter((field) => field.meta.hidden !== true));
 
 		const fileFields = computed(() => {
 			return availableFields.value.filter((field) => {
@@ -366,6 +364,10 @@ export default defineComponent({
 					fields.push(`${imageSource.value}.id`);
 				}
 
+				if (props.collection === 'directus_files' && imageSource.value === '$file') {
+					fields.push('type');
+				}
+
 				const sortField = sort.value.startsWith('-') ? sort.value.substring(1) : sort.value;
 
 				if (fields.includes(sortField) === false) {

app/src/views/private/components/modal-browse/modal-browse.vue

@@ -9,6 +9,7 @@
 			:view-options.sync="options"
 			@update:selection="onSelect"
 			select-mode
+			class="layout"
 		/>
 
 		<template #footer>