:lipstick: https://github.com/siyuan-note/siyuan/issues/12934

app/src/assets/scss/business/_av.scss

@@ -518,7 +518,7 @@
         opacity: 1;
       }
 
-      &__item[data-type="nobg"] .b3-menu__label {
+      &__item[data-type="nobg"] {
         cursor: auto;
       }
 

app/src/assets/scss/component/_list.scss

@@ -111,12 +111,9 @@
 
     &__icon {
       svg, img {
-        float: left;
-        margin: 3px 0;
         height: 16px;
         width: 16px;
         color: var(--b3-theme-on-surface);
-        border-radius: var(--b3-border-radius);
       }
 
       text-align: center;
@@ -129,6 +126,8 @@
       padding: 0 4px;
       flex-shrink: 0;
       border-radius: var(--b3-border-radius);
+      display: flex;
+      align-items: center;
 
       &:hover {
         color: var(--b3-theme-on-background);

app/src/assets/scss/component/_menu.scss

@@ -290,6 +290,20 @@
     }
   }
 
+  &__avemoji {
+    @extend .b3-list-item__icon;
+    align-self: center;
+    margin-left: -4px;
+    font-size: 14px;
+    cursor: pointer;
+
+    svg, img {
+      height: 14px;
+      width: 14px;
+      color: var(--b3-theme-on-surface);
+    }
+  }
+
   &__checked {
     width: 22px;
     height: 22px;

app/src/protyle/render/av/col.ts

@@ -87,7 +87,7 @@ export const getEditHTML = (options: {
 </button>
 <button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="nobg">
-    <span class="b3-menu__icon" data-col-type="${colData.type}" data-icon="${colData.icon}" data-type="update-icon">${colData.icon ? unicode2Emoji(colData.icon) : `<svg style="width: 14px;height: 14px"><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>`}</span>
+    <span class="b3-menu__avemoji" data-col-type="${colData.type}" data-icon="${colData.icon}" data-type="update-icon">${colData.icon ? unicode2Emoji(colData.icon) : `<svg style="width: 14px;height: 14px"><use xlink:href="#${getColIconByType(colData.type)}"></use></svg>`}</span>
     <input data-type="name" class="b3-text-field fn__block" type="text" value="${colData.name}" style="margin: 4px 0">
 </button>
 <button class="b3-menu__item" data-type="goUpdateColType" ${colData.type === "block" ? "disabled" : ""}>
@@ -598,17 +598,17 @@ export const showColMenu = (protyle: IProtyle, blockElement: Element, cellElemen
         focusBlock(blockElement);
     });
     menu.addItem({
-        iconHTML: `<span class="b3-menu__icon">${cellElement.dataset.icon ? unicode2Emoji(cellElement.dataset.icon) : `<svg style="height: 14px;width: 14px;"><use xlink:href="#${getColIconByType(type)}"></use></svg>`}</span>`,
+        iconHTML: `<span class="b3-menu__avemoji">${cellElement.dataset.icon ? unicode2Emoji(cellElement.dataset.icon) : `<svg style="height: 14px;width: 14px;"><use xlink:href="#${getColIconByType(type)}"></use></svg>`}</span>`,
         type: "readonly",
         label: `<input style="margin: 4px 0" class="b3-text-field fn__block fn__size200" type="text" value="${oldValue}">`,
         bind(element) {
-            const iconElement = element.querySelector(".b3-menu__icon") as HTMLElement;
+            const iconElement = element.querySelector(".b3-menu__avemoji") as HTMLElement;
             iconElement.setAttribute("data-icon", cellElement.dataset.icon);
             iconElement.addEventListener("click", (event) => {
                 const rect = iconElement.getBoundingClientRect();
                 openEmojiPanel("", "av", {
                     x: rect.left,
-                    y: rect.bottom,
+                    y: rect.bottom + 4,
                     h: rect.height,
                     w: rect.width
                 }, (unicode) => {

app/src/protyle/render/av/openMenuPanel.ts

@@ -707,7 +707,7 @@ export const openMenuPanel = (options: {
                     const rect = target.getBoundingClientRect();
                     openEmojiPanel("", "av", {
                         x: rect.left,
-                        y: rect.bottom,
+                        y: rect.bottom + 4,
                         h: rect.height,
                         w: rect.width
                     }, (unicode) => {
@@ -772,7 +772,7 @@ export const openMenuPanel = (options: {
                     const rect = target.getBoundingClientRect();
                     openEmojiPanel("", "av", {
                         x: rect.left,
-                        y: rect.bottom,
+                        y: rect.bottom + 4,
                         h: rect.height,
                         w: rect.width
                     }, (unicode) => {

app/src/protyle/render/av/view.ts

@@ -163,7 +163,7 @@ export const getViewHTML = (data: IAV) => {
 </button>
 <button class="b3-menu__separator"></button>
 <button class="b3-menu__item" data-type="nobg">
-    <span class="b3-menu__icon" data-icon="${view.icon}" data-type="update-view-icon">${view.icon ? unicode2Emoji(view.icon) : '<svg style="height: 14px;width: 14px"><use xlink:href="#iconTable"></use></svg>'}</span>
+    <span class="b3-menu__avemoji" data-icon="${view.icon}" data-type="update-view-icon">${view.icon ? unicode2Emoji(view.icon) : '<svg style="height: 14px;width: 14px"><use xlink:href="#iconTable"></use></svg>'}</span>
     <input data-type="name" class="b3-text-field fn__block" type="text" value="${view.name}" data-value="${view.name}" style="margin: 4px 0">
 </button>
 <button class="b3-menu__separator"></button>