From dbd56a40edd9a5d59a7461e458c04cd14e8cb730 Mon Sep 17 00:00:00 2001
From: Pascal Jufer <pascal-jufer@bluewin.ch>
Date: Mon, 21 Aug 2023 16:00:10 +0200
Subject: [PATCH] Fix display of thumbnail with tabular layout in File Library
 (#19483)

* Fix display of thumbnail with tabular layout in File Library

* Add changeset

* Update comment

Co-authored-by: Daniel Biegler <DanielBiegler@users.noreply.github.com>

---------

Co-authored-by: Daniel Biegler <DanielBiegler@users.noreply.github.com>
---
 .changeset/serious-pants-melt.md        |  5 +++++
 app/src/composables/use-alias-fields.ts | 12 +++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/serious-pants-melt.md

diff --git a/.changeset/serious-pants-melt.md b/.changeset/serious-pants-melt.md
new file mode 100644
index 0000000000..ea530f4670
--- /dev/null
+++ b/.changeset/serious-pants-melt.md
@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Fixed display of thumbnail using tabular layout in File Library
diff --git a/app/src/composables/use-alias-fields.ts b/app/src/composables/use-alias-fields.ts
index f9b72138bf..6a00c71d0f 100644
--- a/app/src/composables/use-alias-fields.ts
+++ b/app/src/composables/use-alias-fields.ts
@@ -111,11 +111,13 @@ export function useAliasFields(
 	function getFromAliasedItem<K, T extends Record<string, K>>(item: T, key: string): K | undefined {
 		const aliasInfo = Object.values(aliasedFields.value).find((field) => field.key === key);
 
-		// Skip any fields prefixed with $ as they dont exist. ($thumbnail as an example)
-		key = key
-			.split('.')
-			.filter((k) => !k.startsWith('$'))
-			.join('.');
+		// Skip any nested fields prefixed with $ as they dont exist. ($thumbnail as an example)
+		key = key.includes('.')
+			? key
+					.split('.')
+					.filter((k) => !k.startsWith('$'))
+					.join('.')
+			: key;
 
 		if (!aliasInfo || !aliasInfo.aliased) return get(item, key);