fix zen mode with new layout, closes #794

src/public/javascripts/services/entrypoints.js

@@ -117,13 +117,13 @@ function registerEntrypoints() {
     // hide (toggle) everything except for the note content for zen mode
     const toggleZenMode = () => {
         if (!zenModeActive) {
-            $(".hide-in-zen-mode").addClass("hidden-by-zen-mode");
+            $(".hide-in-zen-mode,.gutter").addClass("hidden-by-zen-mode");
             $("#container").addClass("zen-mode");
             zenModeActive = true;
         }
         else {
             // not hiding / showing explicitly since element might be hidden also for other reasons
-            $(".hide-in-zen-mode").removeClass("hidden-by-zen-mode");
+            $(".hide-in-zen-mode,.gutter").removeClass("hidden-by-zen-mode");
             $("#container").removeClass("zen-mode");
             zenModeActive = false;
         }

src/public/stylesheets/desktop.css

@@ -271,14 +271,7 @@ body {
     position: relative;
     background: linear-gradient(to right, var(--main-border-color), transparent);
     height: 1px;
-    margin-top: 31px;
-}
-
-/* hack for 1 pixel difference in handling between FF and chrome */
-@-moz-document url-prefix() {
-    .tab-row-filler .tab-row-border {
-        margin-top: 32px;
-    }
+    margin-top: 32px;
 }
 
 .note-tab-row .note-tab[active] {

src/public/stylesheets/style.css

@@ -160,6 +160,10 @@ span.fancytree-node.muted { opacity: 0.6; }
     background-position: center;
 }
 
+.zen-mode #center-pane {
+    width: 100% !important;
+}
+
 ul.fancytree-container {
     outline: none !important;
     background-color: inherit !important;

src/views/desktop.ejs

@@ -85,7 +85,7 @@
             </div>
         </div>
 
-        <div class="note-tab-row hide-in-zen-mode">
+        <div class="note-tab-row">
             <div class="note-tab-row-content"></div>
         </div>