From e967718a3dc13ddbb225d8dcd03c4171e6a9db23 Mon Sep 17 00:00:00 2001
From: scheinriese <futurized@icloud.com>
Date: Wed, 20 May 2026 03:29:44 +0200
Subject: [PATCH] fix(icon): unify padding strategy across picker surfaces
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two structurally-distinct dropdown surfaces leak the popup's p-1 padding
in different ways, so they need different fixes:

- Top-level (shui/popup-show! → ui__dropdown-menu-content): icon-search
  is a direct child, and its outer class swaps with @*view
  (cp__emoji-icon-picker / asset-picker / text-picker). Apply `-m-1` to
  all three view classes so switching tabs via "< Back" doesn't jump.

- Sub-content (block-context-menu "Set icon" / "Add reaction"): the
  caller wraps the picker in an extra `[:div.p-1]`, stacking two p-1
  layers. Pass `{:class "!p-0"}` to the sub-content (matching the
  precedent at icon.cljs:4615-4625) and keep the inner wrapper for
  breathing room.

Also drop the orphan `.ui__dropdown-menu-sub-content .cp__emoji-icon-picker
{ -m-2 }` rule that would overshoot under the new `!p-0` math.
---
 src/main/frontend/components/content.cljs |  3 ++
 src/main/frontend/components/icon.css     | 37 +++++++++--------------
 2 files changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/main/frontend/components/content.cljs b/src/main/frontend/components/content.cljs
index 8b333bc238..5c52b73de3 100644
--- a/src/main/frontend/components/content.cljs
+++ b/src/main/frontend/components/content.cljs
@@ -60,6 +60,7 @@
       (shui/dropdown-menu-sub-trigger
        (t :context-menu/set-icon))
       (shui/dropdown-menu-sub-content
+       {:class "!p-0"}
        [:div.p-1
         (icon-component/icon-search
          {:on-chosen (fn [_e icon]
@@ -215,6 +216,7 @@
         (shui/dropdown-menu-sub-trigger
          (t :command.editor/add-reaction))
         (shui/dropdown-menu-sub-content
+         {:class "!p-0"}
          [:div.p-1
           (icon-component/icon-search
            {:on-chosen (fn [_e icon]
@@ -243,6 +245,7 @@
         (shui/dropdown-menu-sub-trigger
          (t :context-menu/set-icon))
         (shui/dropdown-menu-sub-content
+         {:class "!p-0"}
          [:div.p-1
           (let [icon-value (:logseq.property/icon block)]
             (icon-component/icon-search
diff --git a/src/main/frontend/components/icon.css b/src/main/frontend/components/icon.css
index 25f667b285..5f13e044e9 100644
--- a/src/main/frontend/components/icon.css
+++ b/src/main/frontend/components/icon.css
@@ -489,19 +489,23 @@
   @apply -m-4;
 }
 
-.ui__dropdown-menu-content:has(> .cp__emoji-icon-picker) {
+/* icon-search switches its outermost class based on @*view: emoji/icon mode
+   renders `.cp__emoji-icon-picker`, while avatar/image mode renders
+   `.asset-picker` and text mode renders `.text-picker` as a complete
+   replacement. All three render as a direct child of the top-level
+   `ui__dropdown-menu-content` (via shui/popup-show!), so each needs the
+   same `-m-1` to cancel the surface's baked-in p-1 — otherwise switching
+   between modes via "< Back" produces a 4px visual jump. The sub-menu
+   case (block-context-menu) uses a different mechanism: `{:class "!p-0"}`
+   on the sub-content + an inner `[:div.p-1]` wrapper. */
+.ui__dropdown-menu-content:has(> .cp__emoji-icon-picker),
+.ui__dropdown-menu-content:has(> .asset-picker),
+.ui__dropdown-menu-content:has(> .text-picker) {
   @apply flex;
 }
 
-.ui__dropdown-menu-content .cp__emoji-icon-picker {
-  @apply -m-1;
-}
-
-/* Same negative margin to counteract dropdown p-1 padding */
-.ui__dropdown-menu-content .asset-picker {
-  @apply -m-1;
-}
-
+.ui__dropdown-menu-content .cp__emoji-icon-picker,
+.ui__dropdown-menu-content .asset-picker,
 .ui__dropdown-menu-content .text-picker {
   @apply -m-1;
 }
@@ -1193,14 +1197,6 @@
    Text Picker (Level 2 view) - matches asset-picker structure
    ============================================================================ */
 
-.ui__dropdown-menu-content:has(> .text-picker) {
-  @apply flex;
-}
-
-.ui__dropdown-menu-content .text-picker {
-  @apply -m-1;
-}
-
 .text-picker {
   @apply flex flex-col overflow-hidden;
   width: 380px;
@@ -2607,8 +2603,3 @@
 }
 
 
-.ui__dropdown-menu-sub-content {
-  .cp__emoji-icon-picker {
-    @apply -m-2;
-  }
-}