Stop scrollbar from causing content shift

When a note reaches the point where a scrollbar is needed the entire application shifts to the left slightly to accommodate the width of the scrollbar.

This uses the `overflow-y: overlay`  css property which was recently readded to Chrome, though it doesn't have compatibility with other browsers and is simply left with `overflow-y: auto` elsewhere.

In the future browsers will implement `scrollbar-gutter` which should be a globally available method of fixing this problem but that is still likely quite far away.

src/electron/electron/core.cljs

@@ -36,6 +36,9 @@
                     :nodeIntegrationInWorker false
                     :contextIsolation        true
                     :spellcheck              true
+                    ;; Remove OverlayScrollbars and transition `.scrollbar-spacing`
+                    ;; to use `scollbar-gutter` after the feature is implemented in browsers.
+                    :enableBlinkFeatures     'OverlayScrollbars'
                     :preload                 (path/join js/__dirname "js/preload.js")}}
                    linux?
                    (assoc :icon (path/join js/__dirname "icons/logseq.png")))

src/main/frontend/components/sidebar.cljs

@@ -314,7 +314,7 @@
           :route-match route-match})
         [:div.#app-container.h-screen.flex
          [:div.flex-1.h-full.flex.flex-col.overflow-y-auto#left-container.relative
-          [:div
+          [:div.scrollbar-spacing
            (header/header {:open-fn        open-fn
                            :white?         white?
                            :current-repo   current-repo

src/main/frontend/components/sidebar.css

@@ -198,3 +198,16 @@
 .cp__sidebar-main-content[data-is-global-graph-pages='true'] {
   padding: 0;
 }
+
+@supports not (overflow-y: overlay) {
+  .scrollbar-spacing {
+    overflow-y: auto;
+  }
+}
+
+@supports (overflow-y: overlay) {
+  .scrollbar-spacing {
+    overflow-y: overlay;
+  }
+}
+