From 091c6b347db23bc68e5599be5af856a4d064c7a6 Mon Sep 17 00:00:00 2001
From: scheinriese <futurized@icloud.com>
Date: Thu, 14 May 2026 15:40:19 +0200
Subject: [PATCH] enhance(icon-picker): clamp emoji glyph and optically lift
 page-ref icons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two related polish passes on the inline icon slot:

- Emoji glyphs in page-ref and left-sidebar contexts now render at
  font-size 16 (was 20). emoji-mart's <em-emoji size="N"> only sets
  font-size on its inner spans, and native emoji fonts produce a
  bounding box ~32% taller than font-size — so size=20 visually
  rendered at ~26.5px and bled into the row below in the left
  sidebar. Clamping to 16px lands the glyph at ~21px, fitting the
  20x20 slot. Both `em-emoji` and `em-emoji span` selectors are
  load-bearing because emoji-mart's inline font-size on the inner
  span wins over !important on the ancestor — same pattern as the
  customize-band compact state at icon.css:2214.

- Pull all inline page-ref icons up 1px via translateY. vertical-align:
  middle centers icons on x-height/2, but readers compare against
  cap-height/2 (~2px higher in Inter at body size), so the
  geometric center reads as a sag. translateY decouples optical
  correction from layout flow.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 src/main/frontend/components/block.css     | 21 +++++++++++++++++++++
 src/main/frontend/components/container.css | 10 ++++++++++
 2 files changed, 31 insertions(+)

diff --git a/src/main/frontend/components/block.css b/src/main/frontend/components/block.css
index 445172abe8..31dc9149f6 100644
--- a/src/main/frontend/components/block.css
+++ b/src/main/frontend/components/block.css
@@ -69,6 +69,12 @@
     display: inline-flex;
     align-items: center;
     vertical-align: middle;
+    /* Optical lift: `vertical-align: middle` centers on the parent's
+       x-height middle, but readers compare the icon against the cap-
+       height middle (~2px higher in Inter at body size). The pure
+       geometric answer reads as "icon sags." translateY corrects
+       the optical center without disturbing layout flow. */
+    transform: translateY(-1px);
     padding-left: 1px;
 
     &.as-emoji {
@@ -103,6 +109,21 @@
     height: 16px;
   }
 
+  /* Emoji glyphs render via the native font (Apple Color Emoji etc.),
+     whose bounding box is ~32% taller than `font-size`. emoji-mart's
+     `<em-emoji size="20">` sets `font-size: 20px` on its inner span
+     and the visual lands at ~26.5px — overflowing the 20×20 slot.
+     Clamp the inner span's font-size to land at ~18-19px visual,
+     comfortably inside the slot. Both selectors are load-bearing:
+     emoji-mart's inline `font-size` on the descendant span wins over
+     `!important` on the ancestor, so we target both directly. (Same
+     pattern as icon.css:2214 for the customize-band's compact state.) */
+  .icon-cp-container:not(.photo-icon) em-emoji,
+  .icon-cp-container:not(.photo-icon) em-emoji span {
+    font-size: 16px !important;
+    line-height: 1 !important;
+  }
+
   .icon-emoji-wrap em-emoji,
   .icon-cp-container .ui__icon {
     display: inline-flex;
diff --git a/src/main/frontend/components/container.css b/src/main/frontend/components/container.css
index d953213cfc..2df5353724 100644
--- a/src/main/frontend/components/container.css
+++ b/src/main/frontend/components/container.css
@@ -137,6 +137,16 @@
       max-width: 20px;
       overflow: hidden;
     }
+
+    /* Emoji clamp — see block.css's `.page-ref ... em-emoji` rule for
+       the rationale (emoji-mart inline-styles win over `!important` on
+       the ancestor, so target both em-emoji and its descendant span).
+       At font-size 14 the glyph lands ~18-19px, fitting inside the
+       20×20 tile without bleeding into adjacent rows. */
+    em-emoji, em-emoji span {
+      font-size: 16px !important;
+      line-height: 1 !important;
+    }
   }
 
   .icon-cp-container {