diff --git a/.changeset/hip-jeans-fix.md b/.changeset/hip-jeans-fix.md
new file mode 100644
index 0000000000000..67e16a88425f0
--- /dev/null
+++ b/.changeset/hip-jeans-fix.md
@@ -0,0 +1,5 @@
+---
+'@directus/app': patch
+---
+
+Fixed styling issues with the related-values display
diff --git a/app/src/components/v-list-item.vue b/app/src/components/v-list-item.vue
index 2c5f73b0c5280..e9a1db2e90de5 100644
--- a/app/src/components/v-list-item.vue
+++ b/app/src/components/v-list-item.vue
@@ -258,7 +258,10 @@ function onClick(event: PointerEvent) {
 	&.block {
 		--v-icon-color: var(--v-icon-color, var(--theme--foreground-subdued));
 
-		padding: var(--v-list-item-padding, var(--theme--form--field--input--padding));
+		padding: var(
+			--v-list-item-padding,
+			calc(var(--theme--form--field--input--padding) / 2) var(--theme--form--field--input--padding)
+		);
 		position: relative;
 		display: flex;
 		height: var(--theme--form--field--input--height);
@@ -316,8 +319,8 @@ function onClick(event: PointerEvent) {
 		}
 
 		&.dense {
-			height: 44px;
-			padding: 4px 8px;
+			--theme--form--field--input--height: 44px;
+			padding: calc(var(--theme--form--field--input--padding) / 4) calc(var(--theme--form--field--input--padding) / 2);
 
 			& + & {
 				margin-top: var(--v-list-item-margin, 4px);
diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index bc5effdad4bdb..5072e198e3be6 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/app/src/displays/related-values/related-values.vue
@@ -80,7 +80,7 @@ function getLinkForItem(item: any) {
 		:disabled="value?.length === 0"
 	>
 		<template #activator="{ toggle }">
-			<span class="toggle" :class="{ subdued: value?.length === 0 }" @click.stop="toggle">
+			<span class="toggle" :class="{ disabled: value?.length === 0 }" @click.stop="toggle">
 				<span class="label">
 					{{ value?.length }}
 					<template v-if="value?.length >= 100">+</template>
@@ -110,14 +110,16 @@ function getLinkForItem(item: any) {
 <style lang="scss" scoped>
 .toggle {
 	position: relative;
+	--toggle-px: 6px;
+	--toggle-py: 4px;
 
 	&::before {
 		position: absolute;
-		top: -6px;
-		left: -6px;
+		top: calc(-1 * var(--toggle-py));
+		left: calc(-1 * var(--toggle-px));
 		z-index: 1;
-		width: calc(100% + 12px);
-		height: calc(100% + 12px);
+		width: calc(100% + var(--toggle-px) * 2);
+		height: calc(100% + var(--toggle-py) * 2);
 		background-color: var(--theme--background-normal);
 		border-radius: var(--theme--border-radius);
 		opacity: 0;
@@ -130,17 +132,26 @@ function getLinkForItem(item: any) {
 		z-index: 2;
 	}
 
-	&:not(.subdued):hover::before {
+	&:not(.disabled):hover::before {
 		opacity: 1;
 	}
 
-	&:not(.subdued):active::before {
+	&:not(.disabled):active::before {
 		background-color: var(--theme--background-accent);
 	}
+
+	.render-template > .v-menu & {
+		margin: var(--toggle-py) var(--toggle-px);
+	}
+}
+
+.render-template > .v-menu {
+	display: inline;
 }
 
-.subdued {
+.disabled {
 	color: var(--theme--foreground-subdued);
+	pointer-events: none;
 }
 
 .links {