enhance(icon-picker): unify inline page-ref icons in 20x20 slot

Tabler/text/emoji glyphs and avatar/image icons all share the same
20x20 visual slot in [[page-refs]] now, matching the left-sidebar's
.page-icon dimensions. Photo icons (avatar, image) fill the slot;
non-photo glyphs render at 16px centered with 2px breathing room.

Drop the legacy .page-ref svg { width: 16px } clamp that overrode
the per-icon size attributes, drop the 1lh height/line-height clamp
on the wrappers that resolved to 16px and capped emoji glyphs, and
opt the icon wrappers out of the .block-content-wrapper svg { 18px }
sledgehammer. The cljs side simply defaults inline icon-size to 20
(was nil) and lets heading contexts override via heading-icon-size.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/main/frontend/components/block.cljs

@@ -726,17 +726,11 @@
                     (or (model/untitled-page? (:block/title page-entity))
                         (and (ldb/page? page-entity) (string/blank? (:block/title page-entity)))))
         show-icon? (:show-icon? config)
-        ;; Only override the icon's intrinsic default size when we're
+        ;; Inline page-refs render every icon type at 20px so avatar /
-        ;; actually inside a heading — heading-icon-size returns a
+        ;; image / tabler / emoji / text share the same visual slot.
-        ;; meaningful value for h1-h6 (e.g. 28 for h1, 12 for h6) but
+        ;; Headings override via `heading-icon-size` (28→12 for h1→h6).
-        ;; defaults to 14 for non-heading contexts. The 14 was getting
-        ;; applied to inline refs everywhere and forcing avatars to
-        ;; render at 14×14 instead of the photo-icon default of 20×20
-        ;; (icon.cljs:917-919). With `icon-size` nil for non-headings,
-        ;; `get-node-icon-cp` keeps each icon type at its own intrinsic
-        ;; default — 20 for avatars/images, 14 for tabler/emoji.
         heading-level (:parent-heading config)
-        icon-size (when heading-level (heading-icon-size heading-level))]
+        icon-size (if heading-level (heading-icon-size heading-level) 20)]
     [:a.relative
      (cond->
       {:tabIndex "0"
@@ -785,8 +779,7 @@
      (when (and show-icon? (not tag?))
        (let [own-icon (get page-entity :logseq.property/icon)
              emoji? (and (map? own-icon) (= (:type own-icon) :emoji))
-             icon-opts (cond-> {:color? true :not-text-or-page? true}
+             icon-opts {:color? true :not-text-or-page? true :size icon-size}]
-                         icon-size (assoc :size icon-size))]
          (when-let [icon (icon-component/get-node-icon-cp page-entity icon-opts)]
            [:span {:class (str "icon-emoji-wrap " (when emoji? "as-emoji"))}
             icon])))

src/main/frontend/components/block.css

@@ -57,12 +57,17 @@
 .page-ref {
   @apply inline;
 
+  /* .page-ref stays pure `inline` (not inline-flex) so its baseline
+     derives from text metrics, not from the tallest flex child. The
+     icon wrappers are inline-flex *internally* so the glyph centers
+     against parent x-height via `vertical-align: middle`. Wrappers
+     shrink-to-fit the 20px icon — at 20px tall they fit within the
+     24px body line-box (font 16 × line-height 1.5) without inflating
+     it. Heading line-boxes are taller still, so heading-sized icons
+     also fit. */
   .icon-emoji-wrap {
-    position: relative;
-    top: 0;
     display: inline-flex;
     align-items: center;
-    line-height: 1;
     vertical-align: middle;
     padding-left: 1px;
 
@@ -71,8 +76,18 @@
     }
   }
 
+  /* 20×20 visual slot — same dimensions the left-sidebar's `.page-icon`
+     uses, so a `[[Page]]` icon reads at the same scale as its sidebar
+     entry. Photo icons (avatar / image) fill the slot. Tabler / text /
+     emoji glyphs render smaller (16px, see SVG / em-emoji rules below)
+     and center in the slot. `flex-shrink: 0` prevents wrapping text
+     from squeezing the slot. */
   .icon-cp-container {
-    @apply inline-flex items-center pr-0.5;
+    @apply inline-flex items-center justify-center pr-0.5;
+    width: 20px;
+    height: 20px;
+    box-sizing: content-box;
+    flex-shrink: 0;
     vertical-align: middle;
 
     &.photo-icon {
@@ -80,11 +95,12 @@
     }
   }
 
-  &:has(> .icon-emoji-wrap),
+  /* Non-photo glyphs (tabler / text) render at 16 inside the slot —
-  &:has(> .icon-cp-container) {
+     same inset the sidebar uses. Avatars / images keep their inline
-    display: inline-flex;
+     `style: { width: 20px }` and fill the 20×20 slot. */
-    align-items: center;
+  .icon-cp-container:not(.photo-icon) svg {
-    vertical-align: baseline;
+    width: 16px;
+    height: 16px;
   }
 
   .icon-emoji-wrap em-emoji,
@@ -1246,6 +1262,15 @@ html.is-mac {
   height: 18px;
 }
 
+/* Inline page-ref / tag icons set their own size via SVG width/height
+   attributes (icon.cljs text + tabler branches) or inline style (avatar).
+   The 18px clamp above overrides those attributes, so opt the icon
+   wrappers out — `auto` falls back to the attribute. */
+.block-content-wrapper :is(.icon-emoji-wrap, .icon-cp-container, .ls-icon-color-wrap) svg {
+  width: auto;
+  height: auto;
+}
+
 .katex svg {
   width: 100%;
   height: inherit;
@@ -1326,10 +1351,6 @@ html.is-mac {
   height: initial;
 }
 
-.page-ref svg {
-  width: 16px;
-  height: 16px;
-}
 
 .ls-page-title {
   .positioned-properties, .time-spent {