Ensure that v-list-items are displayed correctly throughout the app (#21756)

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

.changeset/pretty-sheep-hammer.md

@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Fixed the height of list items which do have thumbnails

app/src/components/v-list-item.vue

@@ -6,6 +6,8 @@ import { isEqual } from 'lodash';
 
 interface Props {
 	block?: boolean;
+	/** Makes the item height grow, if 'block' is enabled */
+	grow?: boolean;
 	/** Makes the item smaller */
 	dense?: boolean;
 	/** Where the item should link to */
@@ -36,6 +38,7 @@ interface Props {
 
 const props = withDefaults(defineProps<Props>(), {
 	block: false,
+	grow: false,
 	dense: false,
 	to: '',
 	href: undefined,
@@ -116,6 +119,7 @@ function onClick(event: PointerEvent) {
 		class="v-list-item"
 		:class="{
 			active: isActiveRoute,
+			grow,
 			dense,
 			link: isLink,
 			disabled,
@@ -257,7 +261,7 @@ function onClick(event: PointerEvent) {
 		padding: var(--v-list-item-padding, var(--theme--form--field--input--padding));
 		position: relative;
 		display: flex;
-		min-height: var(--theme--form--field--input--height);
+		height: var(--theme--form--field--input--height);
 		margin: 0;
 		background-color: var(
 			--v-list-item-background-color,
@@ -306,6 +310,11 @@ function onClick(event: PointerEvent) {
 			margin-top: var(--v-list-item-margin, 8px);
 		}
 
+		&.grow {
+			height: auto;
+			min-height: var(--theme--form--field--input--height);
+		}
+
 		&.dense {
 			height: 44px;
 			padding: 4px 8px;

app/src/modules/settings/routes/marketplace/components/extension-list-item.vue

@@ -22,7 +22,7 @@ const chip = computed(() => t(`extension_${props.extension.type}`));
 </script>
 
 <template>
-	<v-list-item class="extension-list-item" block clickable :to="`/settings/marketplace/extension/${extension.id}`">
+	<v-list-item class="extension-list-item" block grow clickable :to="`/settings/marketplace/extension/${extension.id}`">
 		<div class="icon"><v-icon :name="icon" /></div>
 		<v-list-item-content>
 			<div class="name">