Browse Source

fix(ui): markdown table horizontal scrollbar https://github.com/logseq/db-test/issues/84

charlie 1 year ago
parent
commit
ca00f843b7

+ 3 - 2
src/main/frontend/components/block.cljs

@@ -2262,6 +2262,7 @@
    (dom/has-class? target "forbid-edit")
    (dom/has-class? target "bullet")
    (dom/has-class? target "logbook")
+   (dom/has-class? target "markdown-table")
    (util/link? target)
    (util/time? target)
    (util/input? target)
@@ -2673,7 +2674,7 @@
     [:div.block-content-or-editor-wrap
      {:class (when (:page-title? config) "ls-page-title-container")}
      (when (and db-based? (not table?)) (block-positioned-properties config block :block-left))
-     [:div.flex.flex-1.flex-col
+     [:div.block-content-or-editor-inner
       [:div.flex.flex-1.flex-row.gap-1.items-center
        (if (and edit? editor-box)
          [:div.editor-wrapper.flex.flex-1
@@ -3410,7 +3411,7 @@
                          :tbody
                          (mapv #(tr :td %) group)))
                  groups)]
-    [:div.table-wrapper
+    [:div.table-wrapper.classic-table.force-visible-scrollbar.markdown-table
      (->elem
        :table
        {:class "table-auto"

+ 4 - 0
src/main/frontend/components/block.css

@@ -72,6 +72,10 @@
   @apply flex flex-1 flex-row flex-wrap gap-1;
 }
 
+.block-content-or-editor-inner {
+  @apply flex flex-1 flex-col w-full;
+}
+
 .block-head-wrap {
   @apply flex flex-1 w-full flex-row flex-wrap;
   @apply justify-between items-center;

+ 9 - 1
src/main/frontend/components/table.css

@@ -58,12 +58,16 @@
 .query-table, .classic-table {
   @apply my-2 rounded overflow-hidden;
 
+  &.force-visible-scrollbar {
+    @apply !overflow-x-auto pb-1;
+  }
+
   table {
     @apply w-full border-none;
   }
 
   th {
-    @apply bg-gray-03;
+    @apply bg-gray-03 whitespace-nowrap;
   }
 
   tr {
@@ -81,4 +85,8 @@
       @apply whitespace-normal;
     }
   }
+}
+
+.markdown-table {
+  width: 98%;
 }