enhance(ui): alignment for the page tags and refs

src/main/frontend/components/block.cljs

@@ -591,43 +591,44 @@
                            (open-page-ref e config page-name page-name-in-block contents-page? whiteboard-page?)))}
      (when-not hide-icon?
        (when-let [icon (pu/get-block-property-value page-entity :icon)]
-         [:span.mr-1.flex.items-center (icon/icon icon)]))
-     (if (and (coll? children) (seq children))
-       (for [child children]
-         (if (= (first child) "Label")
-           (last child)
-           (let [{:keys [content children]} (last child)
-                 page-name (subs content 2 (- (count content) 2))]
-             (rum/with-key (page-reference html-export? page-name (assoc config :children children) nil) page-name))))
-       (cond
-         (and label
-              (string? label)
-              (not (string/blank? label))) ; alias
-         label
+         [:span.mr-1.inline-flex.items-center (icon/icon icon)]))
+     [:span
+      (if (and (coll? children) (seq children))
+        (for [child children]
+          (if (= (first child) "Label")
+            (last child)
+            (let [{:keys [content children]} (last child)
+                  page-name (subs content 2 (- (count content) 2))]
+              (rum/with-key (page-reference html-export? page-name (assoc config :children children) nil) page-name))))
+        (cond
+          (and label
+            (string? label)
+            (not (string/blank? label)))                    ; alias
+          label
 
-         (coll? label)
-         (->elem :span (map-inline config label))
+          (coll? label)
+          (->elem :span (map-inline config label))
 
-         :else
-         (let [original-name (util/get-page-original-name page-entity)
-               s (cond untitled?
-                       (t :untitled)
+          :else
+          (let [original-name (util/get-page-original-name page-entity)
+                s (cond untitled?
+                        (t :untitled)
 
-                       ;; The page-name-in-block generated by the auto-complete is not page-name-sanitized
-                       (pdf-utils/hls-file? page-name)
-                       (pdf-utils/fix-local-asset-pagename page-name)
+                        ;; The page-name-in-block generated by the auto-complete is not page-name-sanitized
+                        (pdf-utils/hls-file? page-name)
+                        (pdf-utils/fix-local-asset-pagename page-name)
 
-                       (not= (util/safe-page-name-sanity-lc original-name) page-name-in-block)
-                       page-name-in-block ;; page-name-in-block might be overridden (legacy))
+                        (not= (util/safe-page-name-sanity-lc original-name) page-name-in-block)
+                        page-name-in-block                  ;; page-name-in-block might be overridden (legacy))
 
-                       original-name
-                       (util/trim-safe original-name)
+                        original-name
+                        (util/trim-safe original-name)
 
-                       :else
-                       (util/trim-safe page-name))
-               _ (when-not page-entity (js/console.warn "page-inner's page-entity is nil, given page-name: " page-name
-                                                        " page-name-in-block: " page-name-in-block))]
-           (if tag? (str "#" s) s))))
+                        :else
+                        (util/trim-safe page-name))
+                _ (when-not page-entity (js/console.warn "page-inner's page-entity is nil, given page-name: " page-name
+                                          " page-name-in-block: " page-name-in-block))]
+            (if tag? (str "#" s) s))))]
 
      (let [repo (state/get-current-repo)
            block-id (:block/uuid config)

src/main/frontend/components/block.css

@@ -122,6 +122,10 @@
       }
     }
   }
+
+  .page-ref {
+    @apply inline-flex items-baseline;
+  }
 }
 
 .open-block-ref-link {
@@ -303,11 +307,16 @@
 }
 
 .page-ref {
+  @apply inline;
   color: var(--lx-accent-11, var(--ls-link-text-color, hsl(var(--primary)/.8)));
 
   &:hover {
     color: var(--lx-accent-11, var(--ls-link-text-color, hsl(var(--primary))));
   }
+
+  .ui__icon.ti {
+    @apply relative left-[1px] top-[3px];
+  }
 }
 
 .asset-ref {