From 393103fb07e2f17eaf45ebd6b0002adccaa1b2c9 Mon Sep 17 00:00:00 2001
From: Pascal Jufer <pascal-jufer@bluewin.ch>
Date: Wed, 28 Feb 2024 13:36:40 +0100
Subject: [PATCH] Fix v-notice scope & render "No items" notice for relational
 list interfaces inside list (#21609)

---
 .changeset/rare-bananas-clean.md                    |  5 +++++
 app/src/interfaces/files/files.vue                  |  4 ++--
 app/src/interfaces/list-m2m/list-m2m.vue            | 12 ++++--------
 app/src/interfaces/list-o2m/list-o2m.vue            | 13 ++++---------
 .../permissions-detail/components/permissions.vue   |  2 +-
 5 files changed, 16 insertions(+), 20 deletions(-)
 create mode 100644 .changeset/rare-bananas-clean.md

diff --git a/.changeset/rare-bananas-clean.md b/.changeset/rare-bananas-clean.md
new file mode 100644
index 0000000000..5eb6b1f79a
--- /dev/null
+++ b/.changeset/rare-bananas-clean.md
@@ -0,0 +1,5 @@
+---
+"@directus/app": patch
+---
+
+Aligned "No items" notice across relational list interfaces to prevent jumping on selection of items
diff --git a/app/src/interfaces/files/files.vue b/app/src/interfaces/files/files.vue
index dd249d7997..e5a7b1715e 100644
--- a/app/src/interfaces/files/files.vue
+++ b/app/src/interfaces/files/files.vue
@@ -290,9 +290,9 @@ const allowDrag = computed(
 			/>
 		</template>
 
-		<v-notice v-else-if="displayItems.length === 0">{{ t('no_items') }}</v-notice>
-
 		<v-list v-else>
+			<v-notice v-if="displayItems.length === 0">{{ t('no_items') }}</v-notice>
+
 			<draggable
 				:model-value="displayItems"
 				item-key="id"
diff --git a/app/src/interfaces/list-m2m/list-m2m.vue b/app/src/interfaces/list-m2m/list-m2m.vue
index 02f98ed379..87a06a2a33 100644
--- a/app/src/interfaces/list-m2m/list-m2m.vue
+++ b/app/src/interfaces/list-m2m/list-m2m.vue
@@ -510,11 +510,11 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
 				/>
 			</template>
 
-			<v-notice v-else-if="displayItems.length === 0">
-				{{ t('no_items') }}
-			</v-notice>
-
 			<v-list v-else>
+				<v-notice v-if="displayItems.length === 0">
+					{{ t('no_items') }}
+				</v-notice>
+
 				<draggable
 					:model-value="displayItems"
 					item-key="id"
@@ -665,10 +665,6 @@ const { createAllowed, updateAllowed, deleteAllowed, selectAllowed } = useRelati
 	}
 }
 
-.v-notice {
-	margin-top: 8px;
-}
-
 .actions {
 	display: flex;
 	align-items: center;
diff --git a/app/src/interfaces/list-o2m/list-o2m.vue b/app/src/interfaces/list-o2m/list-o2m.vue
index 29c001ec8d..0a3a6a913c 100644
--- a/app/src/interfaces/list-o2m/list-o2m.vue
+++ b/app/src/interfaces/list-o2m/list-o2m.vue
@@ -471,11 +471,11 @@ function getLinkForItem(item: DisplayItem) {
 				/>
 			</template>
 
-			<v-notice v-else-if="displayItems.length === 0">
-				{{ t('no_items') }}
-			</v-notice>
-
 			<v-list v-else>
+				<v-notice v-if="displayItems.length === 0">
+					{{ t('no_items') }}
+				</v-notice>
+
 				<draggable
 					:model-value="displayItems"
 					item-key="id"
@@ -619,11 +619,6 @@ function getLinkForItem(item: DisplayItem) {
 	}
 }
 
-.v-skeleton-loader,
-.v-notice {
-	margin-top: 8px;
-}
-
 .actions {
 	display: flex;
 	align-items: center;
diff --git a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
index b725bcb3e8..a2ea247f52 100644
--- a/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
+++ b/app/src/modules/settings/routes/roles/permissions-detail/components/permissions.vue
@@ -64,7 +64,7 @@ const fields = computed<DeepPartial<Field>[]>(() => [
 	</div>
 </template>
 
-<style lang="scss">
+<style scoped>
 .v-notice {
 	margin-bottom: 36px;
 }