diff --git a/.changeset/pretty-sheep-hammer.md b/.changeset/pretty-sheep-hammer.md new file mode 100644 index 0000000000..d042a99fe1 --- /dev/null +++ b/.changeset/pretty-sheep-hammer.md @@ -0,0 +1,5 @@ +--- +'@directus/app': patch +--- + +Fixed the height of list items which do have thumbnails diff --git a/app/src/components/v-list-item.vue b/app/src/components/v-list-item.vue index 1b26c01e17..2c5f73b0c5 100644 --- a/app/src/components/v-list-item.vue +++ b/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(), { 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; diff --git a/app/src/modules/settings/routes/marketplace/components/extension-list-item.vue b/app/src/modules/settings/routes/marketplace/components/extension-list-item.vue index 1960f4595b..3733b9beed 100644 --- a/app/src/modules/settings/routes/marketplace/components/extension-list-item.vue +++ b/app/src/modules/settings/routes/marketplace/components/extension-list-item.vue @@ -22,7 +22,7 @@ const chip = computed(() => t(`extension_${props.extension.type}`));