style: search error styles (#533)

* style: search error styles

* docs: update notes

docs/content.en/docs/release-notes/_index.md

@@ -53,6 +53,7 @@ Information about release notes of Coco Server is provided here.
 - feat: add a component for text reading aloud #522
 - style: history component styles #528
 - fix: app icon & category icon #529
+- style: search error styles #533
 
 ## 0.4.0 (2025-04-27)
 

src/components/Common/ErrorNotification/ErrorSearch.tsx

@@ -3,38 +3,48 @@ import { CircleAlert, Bolt, X, Ellipsis } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import platformAdapter from "@/utils/platformAdapter";
-import Tooltip from "@/components/Common/Tooltip";
 
 interface ErrorSearchProps {
   isError: any[];
 }
 
-const ErrorSearch = ({
-  isError,
-}: ErrorSearchProps) => {
+const ErrorSearch = ({ isError }: ErrorSearchProps) => {
   const { t } = useTranslation();
 
   const [showError, setShowError] = useState<boolean>(isError?.length > 0);
+  const [showContent, setShowContent] = useState<boolean>(false);
 
   if (!showError) return null;
 
   return (
-    <div className="flex items-center gap-2 text-sm text-[#333] dark:text-[#666] p-2">
-      <CircleAlert className="text-[#FF0000] size-3" />
+    <div className="text-sm text-[#333] dark:text-[#666] p-2 break-words space-x-2">
+      <CircleAlert className="text-[#FF0000] size-3 inline-flex mr-2" />
+
       {t("search.list.failures")}
 
-      <Tooltip content={isError} position="bottom">
+      {showContent && (
+        <span className="text-[#FF0000] break-all whitespace-pre-wrap">
+          {isError?.map((item) => item.error).join(", ")}
+        </span>
+      )}
+
+      <div
+        onClick={() => {
+          setShowContent(!showContent);
+        }}
+        className="inline-flex items-center"
+      >
         <Ellipsis className="dark:text-white size-3 cursor-pointer" />
-      </Tooltip>
+      </div>
 
       <Bolt
-        className="dark:text-white size-3 cursor-pointer"
+        className="dark:text-white size-3 cursor-pointer inline-flex"
         onClick={() => {
           platformAdapter.emitEvent("open_settings", "connect");
         }}
       />
       <X
-        className="text-[#666] size-4 cursor-pointer"
+        className="text-[#666] size-4 cursor-pointer inline-flex"
         onClick={() => setShowError(false)}
       />
     </div>