fix width in zen mode, closes #1965

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "trilium",
-  "version": "0.47.2",
+  "version": "0.47.3",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -2797,9 +2797,9 @@
       }
     },
     "electron": {
-      "version": "13.0.0-beta.26",
-      "resolved": "https://registry.npmjs.org/electron/-/electron-13.0.0-beta.26.tgz",
-      "integrity": "sha512-glDAQjSzV26JvmB9pbdd1dLkjqUvBv9X0B8FrRvIK0BAhEmMzzZ3gKD6VPsxg2omDYMI35oThQ+92D4RxRcb+g==",
+      "version": "13.0.0-beta.27",
+      "resolved": "https://registry.npmjs.org/electron/-/electron-13.0.0-beta.27.tgz",
+      "integrity": "sha512-Co5143QQBiUHLY8qKPbe4axGnFxFLIPbdBuKh0pMvhmsGsVbTK3mEihmhl/lBKQe36cu+gnODpvtZZ0uGsqlxA==",
       "dev": true,
       "requires": {
         "@electron/get": "^1.0.1",

package.json

@@ -80,7 +80,7 @@
   },
   "devDependencies": {
     "cross-env": "7.0.3",
-    "electron": "13.0.0-beta.26",
+    "electron": "13.0.0-beta.27",
     "electron-builder": "22.11.1",
     "electron-packager": "15.2.0",
     "electron-rebuild": "2.3.5",

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);
 }