chore: add overflow tips to tag

web/src/components/MemoEditor/ActionButton/TagSelector.tsx

@@ -1,5 +1,6 @@
 import { IconButton } from "@mui/joy";
 import Icon from "@/components/Icon";
+import OverflowTip from "@/components/kit/OverflowTip";
 import { useTagStore } from "@/store/module";
 
 interface Props {
@@ -18,13 +19,13 @@ const TagSelector = (props: Props) => {
         {tags.length > 0 ? (
           tags.map((tag) => {
             return (
-              <span
-                className="w-auto max-w-full truncate text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0"
+              <div
+                className="w-auto max-w-full text-black dark:text-gray-300 cursor-pointer rounded text-sm leading-6 px-2 hover:bg-zinc-300 dark:hover:bg-zinc-700 shrink-0"
                 onClick={() => onTagSelectorClick(tag)}
                 key={tag}
               >
-                #{tag}
-              </span>
+                <OverflowTip>#{tag}</OverflowTip>
+              </div>
             );
           })
         ) : (

web/src/components/MemoEditor/Editor/TagSuggestions.tsx

@@ -1,6 +1,7 @@
 import classNames from "classnames";
 import { useEffect, useRef, useState } from "react";
 import getCaretCoordinates from "textarea-caret";
+import OverflowTip from "@/components/kit/OverflowTip";
 import { useTagStore } from "@/store/module";
 import { EditorRefActions } from ".";
 
@@ -8,6 +9,7 @@ type Props = {
   editorRef: React.RefObject<HTMLTextAreaElement>;
   editorActions: React.ForwardedRef<EditorRefActions>;
 };
+
 type Position = { left: number; top: number; height: number };
 
 const TagSuggestions = ({ editorRef, editorActions }: Props) => {
@@ -53,7 +55,6 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
     };
 
     const matchedTags = tagsRef.current.filter((tag) => customMatches(tag, input));
-
     return matchedTags.slice(0, 5);
   })();
 
@@ -113,7 +114,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
   if (!isVisibleRef.current || !position) return null;
   return (
     <div
-      className="z-20 p-1 mt-1 -ml-2 absolute max-w-[12rem] rounded font-mono shadow bg-zinc-200 dark:bg-zinc-600"
+      className="z-20 p-1 mt-1 -ml-2 absolute max-w-[12rem] gap-px rounded font-mono flex flex-col justify-start items-start overflow-auto shadow bg-zinc-200 dark:bg-zinc-600"
       style={{ left: position.left, top: position.top + position.height }}
     >
       {suggestionsRef.current.map((tag, i) => (
@@ -125,7 +126,7 @@ const TagSuggestions = ({ editorRef, editorActions }: Props) => {
             i === selected ? "bg-zinc-300 dark:bg-zinc-700" : ""
           )}
         >
-          #{tag}
+          <OverflowTip>#{tag}</OverflowTip>
         </div>
       ))}
     </div>