From 41370addf9f3fd4ace9ad1624d6c73828c136dfa Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Thu, 24 Oct 2024 10:19:55 +0800
Subject: [PATCH] :art: https://github.com/siyuan-note/siyuan/issues/12887

---
 app/src/assets/scss/protyle/_toolbar.scss | 2 ++
 app/src/emoji/index.ts                    | 2 +-
 app/src/protyle/hint/index.ts             | 7 ++-----
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/app/src/assets/scss/protyle/_toolbar.scss b/app/src/assets/scss/protyle/_toolbar.scss
index b61f79c6d..69efec3a5 100644
--- a/app/src/assets/scss/protyle/_toolbar.scss
+++ b/app/src/assets/scss/protyle/_toolbar.scss
@@ -67,6 +67,8 @@
     padding: 8px 0;
     display: flex;
     flex-direction: column;
+    min-width: 320px;
+    max-width: 50vw;
   }
 
   &-util {
diff --git a/app/src/emoji/index.ts b/app/src/emoji/index.ts
index 6153040b9..973a3eee7 100644
--- a/app/src/emoji/index.ts
+++ b/app/src/emoji/index.ts
@@ -93,7 +93,7 @@ export const filterEmoji = (key = "", max?: number) => {
     const customStore: IEmojiItem[] = [];
     window.siyuan.emojis.forEach((category, index) => {
         if (!key) {
-            html += `<div class="emojis__title" data-type="${index + 1}">${getEmojiTitle(index)}</div><div style="min-height:${index === 0 ? "28px" : "336px"}" class="emojis__content"${index > 1 ? ' data-index="' + index + '"' : ""}>`;
+            html += `<div class="emojis__title" data-type="${index + 1}">${getEmojiTitle(index)}</div><div style="min-height:${index === 0 ? "30px" : "300px"}" class="emojis__content"${index > 1 ? ' data-index="' + index + '"' : ""}>`;
         }
         if (category.items.length === 0 && index === 0 && !key) {
             html += `<div style="margin-left: 4px">${window.siyuan.languages.setEmojiTip}</div>`;
diff --git a/app/src/protyle/hint/index.ts b/app/src/protyle/hint/index.ts
index 5368e594e..0da7e85ea 100644
--- a/app/src/protyle/hint/index.ts
+++ b/app/src/protyle/hint/index.ts
@@ -56,8 +56,6 @@ export class Hint {
     constructor(protyle: IProtyle) {
         this.element = document.createElement("div");
         this.element.setAttribute("data-close", "false");
-        // height 402 根据 .emojis max-height+8 得来
-        this.element.setAttribute("style", `width:${Math.max(protyle.element.clientWidth / 2, 320)}px;`);
         this.element.className = "protyle-hint b3-list b3-list--background fn__none";
         this.element.addEventListener("click", (event) => {
             const eventTarget = event.target as HTMLElement;
@@ -273,7 +271,6 @@ ${unicode2Emoji(emoji.unicode)}</button>`;
         } else {
             this.element.classList.remove("hint--menu");
         }
-        this.element.style.width = Math.max(protyle.element.clientWidth / 2, 320) + "px";
         if (this.source === "av") {
             const cellElement = hasClosestByClassName(protyle.toolbar.range.startContainer, "av__cell");
             if (cellElement) {
@@ -373,7 +370,8 @@ ${genHintItemHTML(item)}
             }
             lazyLoadEmojiImg(panelElement);
         } else {
-            this.element.innerHTML = `<div style="padding: 0;max-height:402px" class="emojis">
+            // 402 和 .protyle-hint 保持一致，用户 /emoji
+            this.element.innerHTML = `<div style="padding: 0;max-height:402px;width:360px" class="emojis">
 <div class="emojis__panel">${filterEmoji(value, 256)}</div>
 <div class="fn__flex${value ? " fn__none" : ""}">
     ${[
@@ -399,7 +397,6 @@ ${genHintItemHTML(item)}
         if (firstEmojiElement) {
             firstEmojiElement.classList.add("emojis__item--current");
             this.element.classList.remove("fn__none");
-            this.element.style.width = Math.max(protyle.element.clientWidth / 2, 320) + "px";
             const textareaPosition = getSelectionPosition(protyle.wysiwyg.element);
             setPosition(this.element, textareaPosition.left, textareaPosition.top + 26, 30);
             this.element.querySelector(".emojis__panel").scrollTop = 0;