less hacky way to implement distraction free mode which also fixes scrollbar

src/public/javascripts/services/entrypoints.js

@@ -85,12 +85,7 @@ function registerEntrypoints() {
 
     utils.bindShortcut('alt+m', e => {
         $(".hide-toggle").toggle();
-
+        $("#container").toggleClass("distraction-free-mode");
-        const $container = $("#container");
-        // when hiding switch display to block, otherwise grid still tries to display columns which shows
-        // left empty column
-        $container.css("display", $container.css("display") === "grid" ? "block" : "grid");
-        $container.toggleClass("distraction-free-mode");
     });
 
     // hide (toggle) everything except for the note content for distraction free writing

src/public/stylesheets/desktop.css

@@ -18,6 +18,16 @@ body {
     grid-gap: 10px;
 }
 
+#container.distraction-free-mode {
+    grid-template-areas:
+    "title"
+    "note-detail" !important;
+    grid-template-rows: auto
+    auto
+    !important;
+    grid-template-columns: 1fr !important;
+}
+
 #search-box {
     display: none;
     padding: 10px;

src/public/stylesheets/style.css

@@ -450,20 +450,6 @@ div.ui-tooltip {
     border: 1px solid var(--main-border-color);
 }
 
-/*
-* .electron-in-page-search-window is a class specified to default
-* <webview> element for search window.
-*/
-.electron-in-page-search-window {
-    position: fixed;
-    top: 45px;
-    right: 10px;
-    width: 360px;
-    height: 55px;
-    display: none;
-    z-index: 1001;
-}
-
 /*
 * .search-inactive is added to search window <webview> when the window
 * is inactive.