fix: make the toast about webhooks smaller so it doesn't overflow the…

… tabs on the settings page

keep-ui/app/(keep)/providers/page.client.tsx

@@ -7,6 +7,10 @@ import { useFilterContext } from "./filter-context";
 import { toast } from "react-toastify";
 import { useProviders } from "@/utils/hooks/useProviders";
 import { showErrorToast } from "@/shared/ui";
+import { Link } from "@/components/ui";
+
+const EXTERNAL_URL_DOCS_URL =
+  "https://docs.keephq.dev/development/external-url";
 
 export const useFetchProviders = () => {
   const [providers, setProviders] = useState<Provider[]>([]);
@@ -25,8 +29,14 @@ export const useFetchProviders = () => {
     <div>
       Webhooks are disabled because Keep is not accessible from the internet.
       <br />
-      <br />
-      Click for Keep docs on how to enabled it 📚
+      <Link
+        href={EXTERNAL_URL_DOCS_URL}
+        target="_blank"
+        rel="noreferrer noopener"
+      >
+        Read docs
+      </Link>{" "}
+      to learn how to enable it.
     </div>
   );
 
@@ -38,11 +48,7 @@ export const useFetchProviders = () => {
         type: "info",
         position: toast.POSITION.TOP_CENTER,
         autoClose: 10000,
-        onClick: () =>
-          window.open(
-            "https://docs.keephq.dev/development/external-url",
-            "_blank"
-          ),
+        onClick: () => window.open(EXTERNAL_URL_DOCS_URL, "_blank"),
         style: {
           width: "250%", // Set width
           marginLeft: "-75%", // Adjust starting position to left