From 4223540c4f587611e8ef56b1696dc3c58d254c26 Mon Sep 17 00:00:00 2001
From: Matt Furden <zolrath@gmail.com>
Date: Mon, 24 May 2021 15:43:46 -0700
Subject: [PATCH] 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           |  3 +++
 src/main/frontend/components/sidebar.cljs |  2 +-
 src/main/frontend/components/sidebar.css  | 13 +++++++++++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/electron/electron/core.cljs b/src/electron/electron/core.cljs
index 4313e6823be..29a40a8a031 100644
--- a/src/electron/electron/core.cljs
+++ b/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")))
diff --git a/src/main/frontend/components/sidebar.cljs b/src/main/frontend/components/sidebar.cljs
index 64e86613df7..ca3014cc4d0 100644
--- a/src/main/frontend/components/sidebar.cljs
+++ b/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
diff --git a/src/main/frontend/components/sidebar.css b/src/main/frontend/components/sidebar.css
index 9cb9312182d..ccdd606f692 100644
--- a/src/main/frontend/components/sidebar.css
+++ b/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;
+  }
+}
+