fix(ui): breadcrumb fragments overflow in query results container

logseq · Apr 12, 2023 · c8387e9 · c8387e9
1 parent bbaf3e5
commit c8387e9
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 11 deletions.
diff --git a/src/main/frontend/components/block.cljs b/src/main/frontend/components/block.cljs
@@ -2593,7 +2593,7 @@
                                    [block
                                     (when title
                                       (if (seq title)
-                                        (->elem :span (map-inline config title))
+                                        (->elem :span.inline-wrap (map-inline config title))
                                         (->elem :div (markup-elements-cp config body))))]))))
               breadcrumb (->> (into [] parents-props)
                               (concat [page-name-props] (when more? [:more]))
@@ -2603,7 +2603,7 @@
                                                (rum/with-key (breadcrumb-fragment config block label opts) (:block/uuid block)))
                                              [:span.opacity-70 "⋯"])))
                               (interpose (breadcrumb-separator)))]
-          [:div.breadcrumb.block-parents.flex.flex-row.flex-1.flex-wrap.items-center
+          [:div.breadcrumb.block-parents
            {:class (when (seq breadcrumb)
                      (str (when-not (:search? config)
                             " my-2")

diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css
@@ -104,8 +104,27 @@
     height: 18px;
     width: unset !important;
   }
-}
 
+  .inline-wrap {
+    & > div, & > div > div {
+      display: inherit;
+    }
+  }
+
+  &.block-parents {
+    .ui__icon {
+      position: relative;
+      top: 4px;
+    }
+    a {
+      color: var(--ls-primary-text-color);
+
+      &:hover {
+        opacity: 1;
+      }
+    }
+  }
+}
 
 .open-block-ref-link {
   background-color: var(--ls-page-properties-background-color);
@@ -633,14 +652,6 @@ a.cloze-revealed {
   background-color: var(--ls-selection-background-color);
 }
 
-.block-parents a {
-  color: var(--ls-primary-text-color);
-}
-
-.block-parents a:hover {
-  opacity: 1;
-}
-
 .cp__fenced-code-block {
   .not-edit {
     cursor: default;