fixes

src/public/app/layouts/desktop_layout.js

@@ -146,6 +146,7 @@ export default class DesktopLayout {
         return new RootContainer()
             .setParent(appContext)
             .child(new FlexContainer("column")
+                .id("launcher-pane")
                 .child(new GlobalMenuWidget())
                 .child(new ButtonWidget()
                     .icon("bx-file-blank")
@@ -199,7 +200,9 @@ export default class DesktopLayout {
                             .child(new ButtonWidget()
                                 .icon("bx-window-open bx-rotate-90")
                                 .title("Create new pane")
-                                .command("openNewPane"))
+                                .titlePlacement("bottom")
+                                .command("openNewPane")
+                            )
                         )
                         .child(
                             new CollapsibleSectionContainer()

src/public/app/widgets/button_widget.js

@@ -3,7 +3,6 @@ import BasicWidget from "./basic_widget.js";
 const TPL = `
 <span class="button-widget" 
       data-toggle="tooltip"
-      data-placement="right"
       title="">
     <span class="bx"></span>
 </span>
@@ -13,7 +12,9 @@ export default class ButtonWidget extends BasicWidget {
     constructor() {
         super();
 
-        this.settings = {};
+        this.settings = {
+            titlePlacement: 'right'
+        };
     }
 
     doRender() {
@@ -31,7 +32,9 @@ export default class ButtonWidget extends BasicWidget {
     }
 
     refreshIcon() {
-        this.$widget.attr("title", this.settings.title);
+        this.$widget
+            .attr("title", this.settings.title)
+            .attr("data-placement", this.settings.titlePlacement);
         this.$widget.find("span.bx")
             .removeClass()
             .addClass("bx")
@@ -52,6 +55,11 @@ export default class ButtonWidget extends BasicWidget {
         return this;
     }
 
+    titlePlacement(placement) {
+        this.settings.titlePlacement = placement;
+        return this;
+    }
+
     command(command) {
         this.settings.command = command;
         return this;

src/public/app/widgets/containers/pane_container.js

@@ -23,6 +23,8 @@ export default class PaneContainer extends FlexContainer {
 
         this.$widget.append($renderedWidget);
 
+        widget.handleEvent('initialRenderComplete');
+
         widget.toggleExt(false);
 
         this.widgets[noteContext.ntxId] = widget;
@@ -60,7 +62,7 @@ export default class PaneContainer extends FlexContainer {
 
         for (const ntxId in this.widgets) {
             const noteContext = appContext.tabManager.getNoteContextById(ntxId);
-
+console.log(noteContext, activeNtxId);
             const widget = this.widgets[ntxId];
             widget.toggleExt(show && activeNtxId && [noteContext.ntxId, noteContext.mainNtxId].includes(activeNtxId));
         }
@@ -116,6 +118,8 @@ export default class PaneContainer extends FlexContainer {
             }
         }
 
+        this.refresh();
+
         return Promise.all(promises);
     }
 }

src/public/app/widgets/note_context_caching_widget.js

@@ -27,6 +27,8 @@ export default class NoteContextCachingWidget extends NoteContextAwareWidget {
 
         this.$widget.after($renderedWidget);
 
+        this.widgets[ntxId].handleEvent('initialRenderComplete');
+
         keyboardActionsService.updateDisplayedShortcuts($renderedWidget);
 
         await this.widgets[ntxId].handleEvent('setNoteContext', {noteContext});

src/public/app/widgets/quick_search.js

@@ -10,7 +10,12 @@ const TPL = `
 <div class="quick-search input-group input-group-sm">
   <style>
     .quick-search {
-        padding: 4px 10px 10px;
+        padding: 10px 10px 10px 10px;
+    }
+    
+    .quick-search button, .quick-search input {
+        border: 0;
+        font-size: 100% !important;
     }
   
     .quick-search .dropdown-menu {
@@ -23,13 +28,13 @@ const TPL = `
     }
   </style>
   
-  <input type="text" class="form-control form-control-sm search-string" placeholder="Quick search">
+  <div class="input-group-prepend">
-  <div class="input-group-append">
     <button class="btn btn-outline-secondary search-button" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
         <span class="bx bx-search"></span>
     </button>
     <div class="dropdown-menu dropdown-menu-right"></div>
   </div>
+  <input type="text" class="form-control form-control-sm search-string" placeholder="Quick search">
   </div>
 </div>`;
 

src/public/stylesheets/style.css

@@ -297,11 +297,14 @@ div.ui-tooltip {
 }
 
 .btn:not(.btn-primary) {
-    border-color: var(--button-border-color);
     background-color: var(--button-background-color);
     color: var(--button-text-color);
 }
 
+.btn:not(.btn-primary):hover {
+    border-color: var(--button-border-color);
+}
+
 .btn.active:not(.btn-primary) {
     background-color: var(--button-disabled-background-color) !important;
     opacity: 0.4;
@@ -930,13 +933,17 @@ ul.fancytree-container li {
 }
 
 .button-widget .bx {
-    font-size: 150%;
+    font-size: 120%;
     display: inline-block;
     position: relative;
     padding: 10px;
     cursor: pointer;
 }
 
+#launcher-pane .button-widget .bx {
+    font-size: 150%;
+}
+
 .button-widget:hover .bx {
     background-color: var(--hover-item-background-color);
 }