enhance(ux): better MacOS scrollbar for the auto scrolling mode

src/main/frontend/components/theme.cljs

@@ -15,6 +15,22 @@
             [rum.core :as rum]
             [frontend.context.i18n :refer [t]]))
 
+(rum/defc scrollbar-measure
+  []
+  (let [*el (rum/use-ref nil)]
+    (rum/use-effect!
+      (fn []
+        (when-let [el (rum/deref *el)]
+          (let [w (- (.-offsetWidth el) (.-clientWidth el))
+                c "custom-scrollbar"
+                l (.-classList js/document.documentElement)]
+            (if (or (not util/mac?) (> w 2))
+              (.add l c) (.remove l c)))))
+      [])
+    [:div.fixed.w-16.h-16.overflow-scroll.opacity-0
+     {:ref   *el
+      :class "top-1/2 -left-1/2 z-[-999]"}]))
+
 (rum/defc ^:large-vars/cleanup-todo container
   [{:keys [route theme accent-color on-click current-repo nfs-granted? db-restoring?
            settings-open? sidebar-open? system-theme? sidebar-blocks-len onboarding-state preferred-language]} child]
@@ -117,4 +133,5 @@
      {:on-click on-click}
      child
 
-     (pdf/default-embed-playground)]))
+     (pdf/default-embed-playground)
+     (scrollbar-measure)]))

src/main/frontend/components/theme.css

@@ -16,7 +16,7 @@
   }
 }
 
-.visible-scrollbar, html:not(.is-mac) {
+.visible-scrollbar , html.custom-scrollbar {
   ::-webkit-scrollbar-thumb {
     background-color: var(--lx-gray-05, var(--ls-scrollbar-foreground-color, var(--rx-gray-05)));
   }