diff --git a/src/public/javascripts/widgets/collapsible_widget.js b/src/public/javascripts/widgets/collapsible_widget.js
index 127ae2c4e..3978b77f3 100644
--- a/src/public/javascripts/widgets/collapsible_widget.js
+++ b/src/public/javascripts/widgets/collapsible_widget.js
@@ -58,11 +58,16 @@ export default class CollapsibleWidget extends TabAwareWidget {
         this.$headerActions = this.$widget.find('.widget-header-actions');
         this.$headerActions.append(...this.getHeaderActions());
 
+        this.decorateWidget();
+
         this.initialized = this.doRenderBody();
 
         return this.$widget;
     }
 
+    /** for overriding */
+    decorateWidget() {}
+
     /** for overriding */
     async doRenderBody() {}
 
diff --git a/src/public/javascripts/widgets/desktop_layout.js b/src/public/javascripts/widgets/desktop_layout.js
index 278160103..4a9192061 100644
--- a/src/public/javascripts/widgets/desktop_layout.js
+++ b/src/public/javascripts/widgets/desktop_layout.js
@@ -26,6 +26,75 @@ import SimilarNotesWidget from "./similar_notes.js";
 import WhatLinksHereWidget from "./what_links_here.js";
 import SidePaneToggles from "./side_pane_toggles.js";
 
+const RIGHT_PANE_CSS = `
+<style>
+#right-pane .card {
+    border: 0;
+    min-height: 0;
+    max-height: 30%;
+    display: flex;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-direction: column;
+}
+
+#right-pane .card-header {
+    background: inherit;
+    padding: 3px 10px 3px 10px;
+    width: 99%; /* to give minimal right margin */
+    background-color: var(--button-background-color);
+    border-color: var(--button-border-color);
+    border-width: 1px;
+    border-radius: 4px;
+    border-style: solid;
+    display: flex;
+    justify-content: space-between;
+}
+
+#right-pane .widget-title {
+    border-radius: 0;
+    padding: 0;
+    border: 0;
+    background: inherit;
+    font-weight: bold;
+    text-transform: uppercase;
+    color: var(--muted-text-color) !important;
+}
+
+#right-pane .widget-header-action {
+    color: var(--link-color) !important;
+    cursor: pointer;
+}
+
+#right-pane .widget-help {
+    color: var(--muted-text-color);
+    position: relative;
+    top: 2px;
+}
+
+#right-pane .widget-help.no-link:hover {
+    cursor: default;
+    text-decoration: none;
+}
+
+#right-pane .body-wrapper {
+    overflow: auto;
+}
+
+#right-pane .card-body {
+    width: 100%;
+    padding: 8px;
+    border: 0;
+    height: 100%;
+    overflow: auto;
+}
+
+#right-pane .card-body ul {
+    padding-left: 25px;
+    margin-bottom: 5px;
+}
+</style>`;
+
 export default class DesktopLayout {
     getRootWidget(appContext) {
         return new FlexContainer('column')
@@ -57,7 +126,7 @@ export default class DesktopLayout {
                     .child(new TabCachingWidget(() => new PromotedAttributesWidget()))
                     .child(new TabCachingWidget(() => new NoteDetailWidget()))
                 )
-                .child(new SidePaneContainer('right')
+                .child(new SidePaneContainer('right').cssBlock(RIGHT_PANE_CSS)
                     .child(new NoteInfoWidget())
                     .child(new TabCachingWidget(() => new CalendarWidget()))
                     .child(new TabCachingWidget(() => new AttributesWidget()))
diff --git a/src/public/javascripts/widgets/flex_container.js b/src/public/javascripts/widgets/flex_container.js
index f8436d03f..ca1e57b77 100644
--- a/src/public/javascripts/widgets/flex_container.js
+++ b/src/public/javascripts/widgets/flex_container.js
@@ -46,7 +46,9 @@ export default class FlexContainer extends BasicWidget {
         this.$widget = $(`<div>`);
 
         if (this.cssEl) {
-            this.$widget.append($(`<style>`).append(this.cssEl));
+            const css = this.cssEl.trim().startsWith('<style>') ? this.cssEl : `<style>${this.cssEl}</style>`;
+
+            this.$widget.append(css);
         }
 
         for (const key in this.attrs) {
diff --git a/src/public/javascripts/widgets/note_tree.js b/src/public/javascripts/widgets/note_tree.js
index c47933967..e269b1495 100644
--- a/src/public/javascripts/widgets/note_tree.js
+++ b/src/public/javascripts/widgets/note_tree.js
@@ -818,8 +818,4 @@ export default class NoteTreeWidget extends TabAwareWidget {
 
         noteCreateService.duplicateNote(noteId, branch.parentNoteId);
     }
-
-    activeScreenChangedEvent({activeScreen}) {
-        this.toggle(activeScreen === 'tree');
-    }
 }
\ No newline at end of file
diff --git a/src/public/stylesheets/desktop.css b/src/public/stylesheets/desktop.css
index d95abf2df..9a17e219c 100644
--- a/src/public/stylesheets/desktop.css
+++ b/src/public/stylesheets/desktop.css
@@ -141,69 +141,6 @@ body {
     border-color: var(--button-border-color);
 }
 
-#right-pane .card {
-    border: 0;
-    min-height: 0;
-    display: flex;
-    flex-direction: column;
-}
-
-#right-pane .card-header {
-    background: inherit;
-    padding: 3px 10px 3px 10px;
-    width: 99%; /* to give minimal right margin */
-    background-color: var(--button-background-color);
-    border-color: var(--button-border-color);
-    border-width: 1px;
-    border-radius: 4px;
-    border-style: solid;
-    display: flex;
-    justify-content: space-between;
-}
-
-#right-pane .widget-title {
-    border-radius: 0;
-    padding: 0;
-    border: 0;
-    background: inherit;
-    font-weight: bold;
-    text-transform: uppercase;
-    color: var(--muted-text-color) !important;
-}
-
-#right-pane .widget-header-action {
-    color: var(--link-color) !important;
-    cursor: pointer;
-}
-
-#right-pane .widget-help {
-    color: var(--muted-text-color);
-    position: relative;
-    top: 2px;
-}
-
-#right-pane .widget-help.no-link:hover {
-    cursor: default;
-    text-decoration: none;
-}
-
-#right-pane .body-wrapper {
-    overflow: auto;
-}
-
-#right-pane .card-body {
-    width: 100%;
-    padding: 8px;
-    border: 0;
-    height: 100%;
-    overflow: auto;
-}
-
-#right-pane .card-body ul {
-    padding-left: 25px;
-    margin-bottom: 5px;
-}
-
 #widgets-configuration {
     margin: 0;
 }