fix width in zen mode, closes #1965

src/public/app/services/entrypoints.js

@@ -128,20 +128,6 @@ export default class Entrypoints extends Component {
         }
     }
 
-    toggleZenModeCommand() {
-        if (!this.zenModeActive) {
-            $(".hide-in-zen-mode,.gutter").addClass("hidden-by-zen-mode");
-            $("#root-widget").addClass("zen-mode");
-            this.zenModeActive = true;
-        }
-        else {
-            // not hiding / showing explicitly since element might be hidden also for other reasons
-            $(".hide-in-zen-mode,.gutter").removeClass("hidden-by-zen-mode");
-            $("#root-widget").removeClass("zen-mode");
-            this.zenModeActive = false;
-        }
-    }
-
     reloadFrontendAppCommand() {
         utils.reloadApp();
     }

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

@@ -22,6 +22,23 @@ export default class RootContainer extends FlexContainer {
 
             this.$widget.toggleClass("protected", note.isProtected);
         }
+
+        this.setZenMode(this.isZenModeActive);
+    }
+
+    setZenMode(active) {
+        this.isZenModeActive = active;
+
+        if (this.isZenModeActive) {
+            $("#root-widget").addClass("zen-mode");
+        }
+        else {
+            $("#root-widget").removeClass("zen-mode");
+        }
+    }
+
+    toggleZenModeEvent() {
+        this.setZenMode(!this.isZenModeActive);
     }
 
     tabNoteSwitchedEvent() {

src/public/stylesheets/style.css

@@ -131,6 +131,10 @@ span.fancytree-node.muted { opacity: 0.6; }
     margin-right: auto;
 }
 
+.zen-mode .hide-in-zen-mode, .zen-mode .gutter {
+    display: none !important;
+}
+
 .ui-autocomplete {
     max-height: 300px;
     overflow-y: auto;
@@ -775,10 +779,6 @@ body {
     font-size: var(--main-font-size);
 }
 
-.hidden-by-zen-mode {
-    display: none !important;
-}
-
 .gutter {
     background: linear-gradient(to bottom, transparent, var(--accented-background-color), transparent);
 }