From 328b3dc87f21bb3e340726dfdaec604aa815f81f Mon Sep 17 00:00:00 2001
From: formfcw <dev@formfcw.com>
Date: Thu, 14 Mar 2024 11:48:44 +0100
Subject: [PATCH 01/11] change vertical padding to provide more space for
 render-template

---
 app/src/components/v-list-item.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/components/v-list-item.vue b/app/src/components/v-list-item.vue
index 2c5f73b0c5280..285abb63ea5ee 100644
--- a/app/src/components/v-list-item.vue
+++ b/app/src/components/v-list-item.vue
@@ -258,7 +258,7 @@ 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, 8px var(--theme--form--field--input--padding));
 		position: relative;
 		display: flex;
 		height: var(--theme--form--field--input--height);

From fa43bdc877d7087c30e586cff299a0b8be6aafad Mon Sep 17 00:00:00 2001
From: formfcw <dev@formfcw.com>
Date: Thu, 14 Mar 2024 12:34:38 +0100
Subject: [PATCH 02/11] rename subdued to disabled and add pointer-events: none

---
 app/src/displays/related-values/related-values.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index bc5effdad4bdb..8c6689fe7186d 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>
@@ -130,17 +130,18 @@ 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);
 	}
 }
 
-.subdued {
+.disabled {
 	color: var(--theme--foreground-subdued);
+	pointer-events: none;
 }
 
 .links {

From 0883c59a83d528181a75af784e8749f43c414389 Mon Sep 17 00:00:00 2001
From: formfcw <dev@formfcw.com>
Date: Thu, 14 Mar 2024 12:43:05 +0100
Subject: [PATCH 03/11] ensure correct alignment by setting .v-menu display to
 inline within a render template

---
 app/src/displays/related-values/related-values.vue | 5 +++++
 1 file changed, 5 insertions(+)

diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index 8c6689fe7186d..b8e5eda73dc80 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/app/src/displays/related-values/related-values.vue
@@ -138,6 +138,11 @@ function getLinkForItem(item: any) {
 		background-color: var(--theme--background-accent);
 	}
 }
+.render-template {
+	> .v-menu {
+		display: inline;
+	}
+}
 
 .disabled {
 	color: var(--theme--foreground-subdued);

From c61c7483e570f9b0594c60c50031bc749025a4c0 Mon Sep 17 00:00:00 2001
From: formfcw <dev@formfcw.com>
Date: Thu, 14 Mar 2024 12:44:12 +0100
Subject: [PATCH 04/11] fix overlapping mouse-over issues within the
 render-template

---
 .../displays/related-values/related-values.vue   | 16 ++++++++++++----
 1 file changed, 12 insertions(+), 4 deletions(-)

diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index b8e5eda73dc80..32a552bd3e70d 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/app/src/displays/related-values/related-values.vue
@@ -108,16 +108,19 @@ function getLinkForItem(item: any) {
 </template>
 
 <style lang="scss" scoped>
+$toggle-px: 6px;
+$toggle-py: $toggle-px;
+
 .toggle {
 	position: relative;
 
 	&::before {
 		position: absolute;
-		top: -6px;
-		left: -6px;
+		top: #{$toggle-py * -1};
+		left: #{$toggle-px * -1};
 		z-index: 1;
-		width: calc(100% + 12px);
-		height: calc(100% + 12px);
+		width: calc(100% + #{$toggle-px * 2});
+		height: calc(100% + #{$toggle-py * 2});
 		background-color: var(--theme--background-normal);
 		border-radius: var(--theme--border-radius);
 		opacity: 0;
@@ -138,9 +141,14 @@ function getLinkForItem(item: any) {
 		background-color: var(--theme--background-accent);
 	}
 }
+
 .render-template {
 	> .v-menu {
 		display: inline;
+
+		.toggle {
+			margin: $toggle-py $toggle-px;
+		}
 	}
 }
 

From 05c2479055aa963097173384d1c2fbb754072179 Mon Sep 17 00:00:00 2001
From: formfcw <dev@formfcw.com>
Date: Thu, 14 Mar 2024 14:09:36 +0100
Subject: [PATCH 05/11] make height and padding of v-list-item.block more
 dynamic

---
 app/src/components/v-list-item.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/app/src/components/v-list-item.vue b/app/src/components/v-list-item.vue
index 285abb63ea5ee..67e683f8c1105 100644
--- a/app/src/components/v-list-item.vue
+++ b/app/src/components/v-list-item.vue
@@ -258,7 +258,7 @@ function onClick(event: PointerEvent) {
 	&.block {
 		--v-icon-color: var(--v-icon-color, var(--theme--foreground-subdued));
 
-		padding: var(--v-list-item-padding, 8px var(--theme--form--field--input--padding));
+		padding: var(--v-list-item-padding, calc(var(--theme--form--field--input--height) * 0.13333) var(--theme--form--field--input--padding));
 		position: relative;
 		display: flex;
 		height: var(--theme--form--field--input--height);
@@ -316,8 +316,8 @@ function onClick(event: PointerEvent) {
 		}
 
 		&.dense {
-			height: 44px;
-			padding: 4px 8px;
+			--theme--form--field--input--height: 44px;
+			padding-inline: calc(var(--theme--form--field--input--padding) / 2);
 
 			& + & {
 				margin-top: var(--v-list-item-margin, 4px);

From cff5d8db0e49d01f4f681dfda09cd7afda04f35d Mon Sep 17 00:00:00 2001
From: formfcw <dev@formfcw.com>
Date: Thu, 14 Mar 2024 14:38:05 +0100
Subject: [PATCH 06/11] change vertical padding value to not conflict with
 dense listings

---
 app/src/displays/related-values/related-values.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index 32a552bd3e70d..9ca4ec1f1c571 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/app/src/displays/related-values/related-values.vue
@@ -109,7 +109,7 @@ function getLinkForItem(item: any) {
 
 <style lang="scss" scoped>
 $toggle-px: 6px;
-$toggle-py: $toggle-px;
+$toggle-py: 4px;
 
 .toggle {
 	position: relative;

From e4169e81c9b2ba6848f6280c29634c3198007c0b Mon Sep 17 00:00:00 2001
From: formfcw <dev@formfcw.com>
Date: Thu, 14 Mar 2024 14:54:00 +0100
Subject: [PATCH 07/11] add changeset

---
 .changeset/hip-jeans-fix.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/hip-jeans-fix.md

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

From 5465a9e4332144bf997a66060ac941adec47eb10 Mon Sep 17 00:00:00 2001
From: formfcw <dev@formfcw.com>
Date: Fri, 15 Mar 2024 08:55:19 +0100
Subject: [PATCH 08/11] apply prettier

---
 app/src/components/v-list-item.vue | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/app/src/components/v-list-item.vue b/app/src/components/v-list-item.vue
index 67e683f8c1105..c541afded5258 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, calc(var(--theme--form--field--input--height) * 0.13333) var(--theme--form--field--input--padding));
+		padding: var(
+			--v-list-item-padding,
+			calc(var(--theme--form--field--input--height) * 0.13333) var(--theme--form--field--input--padding)
+		);
 		position: relative;
 		display: flex;
 		height: var(--theme--form--field--input--height);

From 8c4d31b9615e4979d301f3be8d0d10ebf9f21d24 Mon Sep 17 00:00:00 2001
From: formfcw <dev@formfcw.com>
Date: Mon, 1 Apr 2024 19:52:57 +0200
Subject: [PATCH 09/11] use existing vars for (vertical) padding

---
 app/src/components/v-list-item.vue | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/app/src/components/v-list-item.vue b/app/src/components/v-list-item.vue
index c541afded5258..e4be85461be1d 100644
--- a/app/src/components/v-list-item.vue
+++ b/app/src/components/v-list-item.vue
@@ -260,7 +260,7 @@ function onClick(event: PointerEvent) {
 
 		padding: var(
 			--v-list-item-padding,
-			calc(var(--theme--form--field--input--height) * 0.13333) var(--theme--form--field--input--padding)
+			calc(var(--theme--form--field--input--padding) / 2) var(--theme--form--field--input--padding)
 		);
 		position: relative;
 		display: flex;
@@ -320,7 +320,10 @@ function onClick(event: PointerEvent) {
 
 		&.dense {
 			--theme--form--field--input--height: 44px;
-			padding-inline: calc(var(--theme--form--field--input--padding) / 2);
+			padding: var(
+				--v-list-item-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);

From e7e5bbe61c18fc0b33aef9e597b0dea5e08373ec Mon Sep 17 00:00:00 2001
From: formfcw <dev@formfcw.com>
Date: Mon, 1 Apr 2024 20:08:28 +0200
Subject: [PATCH 10/11] replace scss-vars with css vars

---
 .../related-values/related-values.vue         | 27 +++++++++----------
 1 file changed, 12 insertions(+), 15 deletions(-)

diff --git a/app/src/displays/related-values/related-values.vue b/app/src/displays/related-values/related-values.vue
index 9ca4ec1f1c571..5072e198e3be6 100644
--- a/app/src/displays/related-values/related-values.vue
+++ b/app/src/displays/related-values/related-values.vue
@@ -108,19 +108,18 @@ function getLinkForItem(item: any) {
 </template>
 
 <style lang="scss" scoped>
-$toggle-px: 6px;
-$toggle-py: 4px;
-
 .toggle {
 	position: relative;
+	--toggle-px: 6px;
+	--toggle-py: 4px;
 
 	&::before {
 		position: absolute;
-		top: #{$toggle-py * -1};
-		left: #{$toggle-px * -1};
+		top: calc(-1 * var(--toggle-py));
+		left: calc(-1 * var(--toggle-px));
 		z-index: 1;
-		width: calc(100% + #{$toggle-px * 2});
-		height: calc(100% + #{$toggle-py * 2});
+		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;
@@ -140,18 +139,16 @@ $toggle-py: 4px;
 	&:not(.disabled):active::before {
 		background-color: var(--theme--background-accent);
 	}
-}
-
-.render-template {
-	> .v-menu {
-		display: inline;
 
-		.toggle {
-			margin: $toggle-py $toggle-px;
-		}
+	.render-template > .v-menu & {
+		margin: var(--toggle-py) var(--toggle-px);
 	}
 }
 
+.render-template > .v-menu {
+	display: inline;
+}
+
 .disabled {
 	color: var(--theme--foreground-subdued);
 	pointer-events: none;

From 78f30f3a80d557898548e5981bd4bfb245f963e3 Mon Sep 17 00:00:00 2001
From: formfcw <dev@formfcw.com>
Date: Mon, 1 Apr 2024 20:21:01 +0200
Subject: [PATCH 11/11] fix wrong css var

---
 app/src/components/v-list-item.vue | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/app/src/components/v-list-item.vue b/app/src/components/v-list-item.vue
index e4be85461be1d..e9a1db2e90de5 100644
--- a/app/src/components/v-list-item.vue
+++ b/app/src/components/v-list-item.vue
@@ -320,10 +320,7 @@ function onClick(event: PointerEvent) {
 
 		&.dense {
 			--theme--form--field--input--height: 44px;
-			padding: var(
-				--v-list-item-padding,
-				calc(var(--theme--form--field--input--padding) / 4) calc(var(--theme--form--field--input--padding) / 2)
-			);
+			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);