From ae40445deebb724452eed852eeedb9c290dc70b5 Mon Sep 17 00:00:00 2001
From: Rijk van Zanten <rijkvanzanten@me.com>
Date: Fri, 30 Jul 2021 18:59:02 +0200
Subject: [PATCH] Add a standardized max-height to tree select interface
 (#7103)

---
 .../select-multiple-checkbox-tree.vue                    | 9 +++++++++
 app/src/styles/_variables.scss                           | 3 ++-
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue b/app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue
index 425ce80316..4a21659934 100644
--- a/app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue
+++ b/app/src/interfaces/select-multiple-checkbox-tree/select-multiple-checkbox-tree.vue
@@ -73,12 +73,21 @@ export default defineComponent({
 
 <style scoped>
 .select-multiple-checkbox-tree {
+	max-height: var(--input-height-max);
+	overflow: auto;
 	border: var(--border-width) solid var(--border-normal);
 	border-radius: var(--border-radius);
 }
 
 .search {
+	position: sticky;
+	top: 0;
+	z-index: 2;
 	padding: 10px;
 	padding-bottom: 0;
 }
+
+.search .v-input {
+	box-shadow: 0 0 4px 4px var(--background-page);
+}
 </style>
diff --git a/app/src/styles/_variables.scss b/app/src/styles/_variables.scss
index 8e7a4f9b0c..be74c38e63 100644
--- a/app/src/styles/_variables.scss
+++ b/app/src/styles/_variables.scss
@@ -1,7 +1,7 @@
 :root {
 	--brand: var(--primary); // will be overriden with directus_settings.project_color
 	--white: #fff;
-	--black: #090C0D;
+	--black: #090c0d;
 	--transition: cubic-bezier(0.4, 0, 0.2, 1);
 	--transition-in: cubic-bezier(0, 0, 0.2, 1);
 	--transition-out: cubic-bezier(0.4, 0, 1, 1);
@@ -14,6 +14,7 @@
 	--border-radius: 4px;
 	--input-height: 52px;
 	--input-height-tall: 168px;
+	--input-height-max: 500px;
 	--input-padding: 12px;
 	--form-column-width: 300px;
 	--form-column-max-width: 380px;