From 0a50de24d2fb3824549231f12559f9ecf6003a10 Mon Sep 17 00:00:00 2001
From: Vanessa <lly219@gmail.com>
Date: Sat, 15 Oct 2022 12:00:56 +0800
Subject: [PATCH] :lipstick: https://github.com/siyuan-note/siyuan/issues/6197

---
 app/src/assets/scss/_menu.scss    |  7 ++++---
 app/src/assets/scss/_toolbar.scss | 12 ++++++++++++
 app/src/assets/scss/base.scss     |  2 +-
 app/src/protyle/hint/index.ts     |  4 ++--
 4 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/app/src/assets/scss/_menu.scss b/app/src/assets/scss/_menu.scss
index 986f7ae3f..fe0628639 100644
--- a/app/src/assets/scss/_menu.scss
+++ b/app/src/assets/scss/_menu.scss
@@ -3,11 +3,12 @@
   border-radius: 4px;
   box-shadow: var(--b3-dialog-shadow);
   background-color: var(--b3-menu-background);
-  padding: 4px 0;
+  padding: 8px;
   z-index: 210;
 
   &__item {
     padding: 0 16px 0 8px;
+    border-radius: 4px;
     user-select: none;
     display: flex;
     line-height: 30px;
@@ -34,9 +35,9 @@
         border: 1px solid var(--b3-theme-surface-lighter);
         border-radius: 4px;
         background-color: var(--b3-menu-background);
-        padding: 4px 0;
+        padding: 8px;
         position: absolute;
-        left: 100%;
+        left: calc(100% + 8px);
         top: -5px;
         box-shadow: var(--b3-dialog-shadow);
         mix-blend-mode: difference;
diff --git a/app/src/assets/scss/_toolbar.scss b/app/src/assets/scss/_toolbar.scss
index 2b2202232..1c78b244c 100644
--- a/app/src/assets/scss/_toolbar.scss
+++ b/app/src/assets/scss/_toolbar.scss
@@ -45,6 +45,18 @@
     }
   }
 
+  &-hint {
+    position: fixed;
+    border-radius: 4px;
+    box-shadow: var(--b3-dialog-shadow);
+    background-color: var(--b3-menu-background);
+    z-index: 201;
+    overflow: auto;
+    max-height: 402px;
+    box-sizing: border-box;
+    padding: 8px 0;
+  }
+
   &-util {
     @extend .b3-menu;
     z-index: 200;
diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
index 0abc62b66..b4560645c 100644
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@@ -38,7 +38,7 @@ ctrl+p 搜索: 199
 .protyle-util: 200
 
 // 引用提示需小于 .block__popover
-.b3-menu: 201
+.protyle-hint: 201
 
 // 需小于 .b3-menu 悬浮窗点击更多
 // 需小于 .b3-dialog https://ld246.com/article/1637204682648
diff --git a/app/src/protyle/hint/index.ts b/app/src/protyle/hint/index.ts
index 0899b5fe2..5353a7eaf 100644
--- a/app/src/protyle/hint/index.ts
+++ b/app/src/protyle/hint/index.ts
@@ -45,8 +45,8 @@ export class Hint {
         this.element = document.createElement("div");
         this.element.setAttribute("data-close", "false");
         // height 402 根据 .emojis max-height+8 得来
-        this.element.setAttribute("style", `z-index: 201;overflow:auto;max-height:402px;width:${Math.max(protyle.element.clientWidth / 2, 320)}px;box-sizing: border-box;`);
-        this.element.className = "b3-menu b3-list b3-list--background fn__none";
+        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;
             if (eventTarget.tagName === "INPUT") {