fix(ui): css tweaks for the ls table container

deps/shui/src/logseq/shui/demo.cljs

@@ -1,6 +1,7 @@
 (ns logseq.shui.demo
   (:require [rum.core :as rum]
             [logseq.shui.ui :as ui]
+            [dommy.core :refer-macros [sel1]]
             [logseq.shui.form.core :refer [yup yup-resolver] :as form-core]
             [promesa.core :as p]
             [logseq.shui.dialog.core :as dialog-core]))
@@ -483,3 +484,63 @@
         (sample-date-picker))]
 
      [:hr.mb-80]]))
+
+
+(defn- get-head-container
+  []
+  (sel1 "#head"))
+
+(defn- get-main-scroll-container
+  []
+  (sel1 "#main-content-container"))
+
+(rum/defc sticky-table
+  []
+
+  (let [el-ref (rum/use-ref nil)]
+    (rum/use-effect!
+      (fn []
+        (let [^js container (get-main-scroll-container)
+              ^js el (rum/deref el-ref)
+              ^js cls (.-classList el)
+              *ticking? (volatile! false)
+              el-top (-> el (.getBoundingClientRect) (.-top))
+              head-top (-> (get-head-container) (js/getComputedStyle) (.-height) (js/parseInt))
+              translate (fn [offset]
+                          (set! (. (.-style el) -transform) (str "translate3d(0, " offset "px , 0)"))
+                          (if (zero? offset)
+                            (.remove cls "translated")
+                            (.add cls "translated")))
+              *last-offset (volatile! 0)
+              handle (fn []
+                       (let [scroll-top (js/parseInt (.-scrollTop container))
+                             offset (if (> (+ scroll-top head-top) el-top)
+                                      (+ (- scroll-top el-top) head-top 1) 0)
+                             offset (js/parseInt offset)
+                             last-offset @*last-offset]
+                         (if (and (not (zero? last-offset))
+                               (not= offset last-offset))
+                           (let [dir (if (neg? (- offset last-offset)) -1 1)]
+                             (loop [offset' (+ last-offset dir)]
+                               (translate offset')
+                               (if (and (not= offset offset')
+                                     (< (abs (- offset offset')) 100))
+                                 (recur (+ offset' dir))
+                                 (translate offset))))
+                           (translate offset))
+                         (vreset! *last-offset offset)))
+              handler (fn [^js e]
+                        (when (not @*ticking?)
+                          (js/window.requestAnimationFrame
+                            #(do (handle) (vreset! *ticking? false)))
+                          (vreset! *ticking? true)))]
+          (.addEventListener container "scroll" handler)
+          #(.removeEventListener container "scroll" handler)))
+      [])
+
+    [:div.charlie-table
+     [:div.charlie-table-header
+      {:ref el-ref}
+      [:strong "header"]]
+     [:div.charlie-table-content
+      [:strong "content"]]]))

src/main/frontend/components/table.css

@@ -36,6 +36,7 @@
     &.ls-fixed {
       @apply fixed overflow-hidden;
 
+      min-width: unset;
       top: 48px !important;
     }
   }