diff --git a/browser/css/jsdialogs.css b/browser/css/jsdialogs.css
index aba09e546..422a970aa 100644
--- a/browser/css/jsdialogs.css
+++ b/browser/css/jsdialogs.css
@@ -358,6 +358,8 @@ td.jsdialog > [id^='table-box']:not(.sidebar) {
 	color: var(--color-text-lighter) !important;
 }
 
+/*.ui-treeview-body needs this max-height both in dialogs
+ and within sidebar e.g.: animation > effect*/
 .ui-treeview-body,
 #custom_animation_label_parent {
 	color: var(--color-main-text);
diff --git a/browser/css/jssidebar.css b/browser/css/jssidebar.css
index c55077e4b..50266eacc 100644
--- a/browser/css/jssidebar.css
+++ b/browser/css/jssidebar.css
@@ -328,14 +328,7 @@ button#button2.ui-pushbutton.jsdialog.sidebar {
 
 /* Navigator */
 
-#NavigatorDeck #contentbox,
-#NavigatorDeck #contenttree,
-#NavigatorDeck #tree {
-	position: absolute;
-	top: 30px;
-	bottom: 10px;
-	left: 10px;
-	right: 10px;
+#NavigatorDeck * {
 	border: none;
 }
 #NavigatorDeck .ui-treeview-entry {
@@ -350,6 +343,9 @@ button#button2.ui-pushbutton.jsdialog.sidebar {
 	/* good to move this into css var*/
 	font-size: 14px;
 }
+#NavigatorDeck #contenttree > .ui-treeview-body {
+	max-height: initial;
+}
 #NavigatorDeck .ui-treeview-cell {
 	/* Move this whole block away and fix in the main control */
 	display: flex;