Make too wide tables on mobile horizontal scroll

district0x · Dec 16, 2024 · 4d2c094 · 4d2c094
1 parent 3b627f9
commit 4d2c094
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 4 deletions.
diff --git a/ui/src/ethlance/ui/component/scrollable.cljs b/ui/src/ethlance/ui/component/scrollable.cljs
@@ -41,10 +41,13 @@
        (fn [_ child]
          [:div.scrollable {:ref react-ref} child])})))
 
+(defn- c-scrollable-css
+  [& [opts body]]
+  [:div {:style {:overflow-x "auto"}} (or body opts)])
 
 (defn c-scrollable
   [opts val]
-  (let [use-noop true] ; Using noop implementation until can make the simplebar work
-    (if use-noop
-      (c-scrollable-noop opts val)
+  (let [alternative-implementation true] ; Using basic CSS implementation to make wide tables scroll horizontally
+    (if alternative-implementation
+      (c-scrollable-css opts val)
       (c-scrollable-real opts val))))
diff --git a/ui/src/ethlance/ui/page/job_detail.cljs b/ui/src/ethlance/ui/page/job_detail.cljs
@@ -445,7 +445,6 @@
     [:div.proposal-listing
      [:div.label "Arbitrations"]
      [c-scrollable
-      {:forceVisible true :autoHide false}
       (into [c-table {:headers ["" "Arbiter" "Rate" "Accepted at" "Status" ""]}]
             (map (fn [arbitration]
                    [[:span (cond