From 882912826f01d8a060a0feae7e137ac97c2ca3af Mon Sep 17 00:00:00 2001
From: zadam <zadam.apps@gmail.com>
Date: Sat, 5 Jun 2021 22:40:17 +0200
Subject: [PATCH] fix ribbon shrinking/wrap

---
 TODO                                              |  3 +++
 src/public/app/services/resizer.js                |  4 ++--
 .../app/widgets/containers/ribbon_container.js    | 15 +++++++++++----
 .../widgets/containers/split_note_container.js    |  1 +
 4 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/TODO b/TODO
index 520df4880..8f49b6646 100644
--- a/TODO
+++ b/TODO
@@ -1 +1,4 @@
 - search should not require a note
+- all ribbon tabs should have assignable shortcut
+- new icon
+- green theme
diff --git a/src/public/app/services/resizer.js b/src/public/app/services/resizer.js
index 0901a05c2..7fae5cd9d 100644
--- a/src/public/app/services/resizer.js
+++ b/src/public/app/services/resizer.js
@@ -33,8 +33,8 @@ function setupLeftPaneResizer(leftPaneVisible) {
 
 function setupRightPaneResizer() {
     if (rightInstance) {
-        leftInstance.destroy();
-        leftInstance = null;
+        rightInstance.destroy();
+        rightInstance = null;
     }
 
     const rightPaneVisible = $("#right-pane").is(":visible");
diff --git a/src/public/app/widgets/containers/ribbon_container.js b/src/public/app/widgets/containers/ribbon_container.js
index a18f335d9..a2211ba1a 100644
--- a/src/public/app/widgets/containers/ribbon_container.js
+++ b/src/public/app/widgets/containers/ribbon_container.js
@@ -23,6 +23,10 @@ const TPL = `
     .ribbon-tab-title {
         color: var(--muted-text-color);
         border-bottom: 1px solid var(--main-border-color); 
+        min-width: 24px;
+        flex-basis: 24px;
+        max-width: fit-content;
+        flex-grow: 10;
     }
 
     .ribbon-tab-title .bx {
@@ -34,7 +38,6 @@ const TPL = `
     .ribbon-tab-title.active {
         color: var(--main-text-color);
         border-bottom: 1px solid var(--main-text-color);
-        flex-shrink: 1;
         white-space: nowrap;
         overflow: hidden;
         text-overflow: ellipsis;
@@ -53,14 +56,18 @@ const TPL = `
     }
     
     .ribbon-tab-spacer {
-        flex-basis: 35px;
-        flex-shrink: 1;
+        flex-basis: 0;
+        min-width: 0;
+        max-width: 35px;
+        flex-grow: 1;
         border-bottom: 1px solid var(--main-border-color);
     }
         
     .ribbon-tab-spacer:last-of-type {
-        flex-shrink: 1;
         flex-grow: 1;
+        flex-basis: 0;
+        min-width: 0;
+        max-width: 10000px;
     }
     
     .ribbon-button-container {
diff --git a/src/public/app/widgets/containers/split_note_container.js b/src/public/app/widgets/containers/split_note_container.js
index b17d13ede..f33f6aced 100644
--- a/src/public/app/widgets/containers/split_note_container.js
+++ b/src/public/app/widgets/containers/split_note_container.js
@@ -18,6 +18,7 @@ export default class SplitNoteContainer extends FlexContainer {
         const $renderedWidget = widget.render();
 
         $renderedWidget.attr("data-ntx-id", noteContext.ntxId);
+        $renderedWidget.css("flex-basis", "0"); // so that each split has same width
 
         $renderedWidget.on('click', () => appContext.tabManager.activateNoteContext(noteContext.ntxId));