enhance(ui): refactor the nested DOM structure for the block title (head) wrap

src/main/frontend/components/block.cljs

@@ -2425,24 +2425,26 @@
        (when-not plugin-slotted?
          (let [block-tags (:block/tags block)
                db-based? (config/db-based-graph? (state/get-current-repo))]
-           [:div.flex-1.w-full
-            [:div.flex.flex-1.w-full.flex-row.flex-wrap.justify-between.items-center
-             (cond
-               (:block/name block)
-               [:div.flex.flex-row.items-center.gap-1
-                (icon/get-page-icon block {})
-                (page-cp config block)]
 
-               :else
-               [:div.flex-1 (build-block-title config block)])
-
-             [:div.flex.flex-row.items-center.gap-1
-              (when (and db-based? (seq block-tags))
-                (tags config block))
-              (when (and (:original-block config) (not (:block/name block)))
-                [:a.fade-link {:title "Embed block"
-                               :href (rfe/href :page {:name (str (:block/uuid block))})}
-                 (ui/icon "link")])]]]))
+           [:div.block-head-wrap
+            (cond
+              (:block/name block)
+              [:div.flex.flex-row.items-center.gap-1
+               (icon/get-page-icon block {})
+               (page-cp config block)]
+
+              :else
+              (build-block-title config block))
+
+            [:div.flex.flex-row.items-center.gap-1
+             (when (and db-based? (seq block-tags))
+               (tags config block))
+
+             (when (and (:original-block config) (not (:block/name block)))
+               [:a.fade-link {:title "Embed block"
+                              :href (rfe/href :page {:name (str (:block/uuid block))})}
+                (ui/icon "link")])]]
+           ))
 
        (clock-summary-cp block body)]
 

src/main/frontend/components/block.css

@@ -90,6 +90,11 @@
   }
 }
 
+.block-head-wrap {
+  @apply flex flex-1 w-full flex-row flex-wrap;
+  @apply justify-between items-center;
+}
+
 .breadcrumb {
   .asset-container > img {
     height: 18px;
@@ -428,9 +433,7 @@
 
 .ls-block :is(h1, h2),
 .editor-inner .uniline-block:is(.h1, .h2) {
-  border-bottom: 1px solid var(--ls-quaternary-background-color);
-  margin: 0.125em 0;
-  padding-bottom: 0.125em;
+  @apply border-b border-gray-06 mt-1 mb-2 pb-1;
 }
 
 .block-ref .ls-block :is(h1, h2),