Fix v-notice scope & render "No items" notice for relational list interfaces inside list (#21609)

.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

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"

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;

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;

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;
 }