fix: tag suggestions positioning (usememos#2151)

rkj · Aug 18, 2023 · 735cfda · 735cfda
1 parent 3f82729
commit 735cfda
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/web/src/components/MemoEditor/Editor/TagSuggestions.tsx b/web/src/components/MemoEditor/Editor/TagSuggestions.tsx
@@ -94,8 +94,8 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
   if (!isVisibleRef.current || !position) return null;
   return (
     <div
-      className="z-2 p-1 absolute max-w-[12rem] rounded font-mono shadow bg-zinc-200 dark:bg-zinc-600"
-      style={{ left: position.left - 6, top: position.top + position.height + 2 }}
+      className="tag-suggestions z-20 p-1 absolute max-w-[12rem] rounded font-mono shadow bg-zinc-200 dark:bg-zinc-600"
+      style={{ left: position.left, top: position.top + position.height }}
     >
       {suggestionsRef.current.map((tag, i) => (
         <div

diff --git a/web/src/less/memo-editor.less b/web/src/less/memo-editor.less
@@ -12,6 +12,11 @@
       }
     }
 
+    .tag-suggestions {
+      margin-left: 6px;
+      margin-top: 18px;
+    }
+
     .tag-action > .tag-list {
       @apply bottom-7;
       top: unset !important;
@@ -22,6 +27,11 @@
     }
   }
 
+  .tag-suggestions {
+    margin-left: -10px;
+    margin-top: 2px;
+  }
+
   > .memo-editor {
     @apply mt-4 flex flex-col justify-start items-start relative w-full h-auto bg-inherit dark:text-gray-200;
   }