From fb8bdb96e9da52c4c08ea439763cf1e603a303ec Mon Sep 17 00:00:00 2001
From: Nitwel <mail@nitwel.de>
Date: Fri, 11 Aug 2023 15:22:57 +0200
Subject: [PATCH] fix item-dropdown interface text overflowing (#19406)

* fix item-dropdown interface text overflowing

* Add changeset

---------

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>
---
 .changeset/dull-elephants-carry.md                           | 5 +++++
 .../collection-item-dropdown/collection-item-dropdown.vue    | 3 +++
 2 files changed, 8 insertions(+)
 create mode 100644 .changeset/dull-elephants-carry.md

diff --git a/.changeset/dull-elephants-carry.md b/.changeset/dull-elephants-carry.md
new file mode 100644
index 0000000000..c541150987
--- /dev/null
+++ b/.changeset/dull-elephants-carry.md
@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Fixed text overflow in collection item interface
diff --git a/app/src/interfaces/collection-item-dropdown/collection-item-dropdown.vue b/app/src/interfaces/collection-item-dropdown/collection-item-dropdown.vue
index 965948f5ca..6fe3eb6fb4 100644
--- a/app/src/interfaces/collection-item-dropdown/collection-item-dropdown.vue
+++ b/app/src/interfaces/collection-item-dropdown/collection-item-dropdown.vue
@@ -140,6 +140,9 @@ function onSelection(selectedIds: (number | string)[] | null) {
 
 <style lang="scss" scoped>
 .preview {
+	display: block;
 	flex-grow: 1;
+	height: calc(100% - 16px);
+	overflow: hidden;
 }
 </style>