chore: tweak webhook section

web/src/components/CreateWebhookDialog.tsx

@@ -133,7 +133,7 @@ const CreateWebhookDialog: React.FC<Props> = (props: Props) => {
             />
           </div>
         </div>
-        <div className="w-full flex flex-row justify-end items-center mt-4 space-x-2">
+        <div className="w-full flex flex-row justify-end items-center mt-2 space-x-2">
           <Button color="neutral" variant="plain" disabled={requestState.isLoading} loading={requestState.isLoading} onClick={destroy}>
             {t("common.cancel")}
           </Button>

web/src/components/Settings/WebhookSection.tsx

 import { Button, IconButton } from "@mui/joy";
 import { useEffect, useState } from "react";
+import { Link } from "react-router-dom";
 import { webhookServiceClient } from "@/grpcweb";
 import useCurrentUser from "@/hooks/useCurrentUser";
 import { Webhook } from "@/types/proto/api/v2/webhook_service";
@@ -7,7 +8,6 @@ import { useTranslate } from "@/utils/i18n";
 import showCreateWebhookDialog from "../CreateWebhookDialog";
 import { showCommonDialog } from "../Dialog/CommonDialog";
 import Icon from "../Icon";
-import LearnMore from "../LearnMore";
 
 const listWebhooks = async (userId: number) => {
   const { webhooks } = await webhookServiceClient.listWebhooks({
@@ -46,15 +46,10 @@ const WebhookSection = () => {
   };
 
   return (
-    <>
-      <div className="w-full flex flex-col justify-start items-start space-y-4">
-        <div className="w-full">
-          <div className="flex justify-between items-center">
+    <div className="w-full flex flex-col justify-start items-start">
+      <div className="w-full flex justify-between items-center">
         <div className="flex-auto space-y-1">
-              <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-300">
-                Webhooks
-                <LearnMore className="ml-2" url="https://usememos.com/docs/advanced-settings/webhook" />
-              </p>
+          <p className="flex flex-row justify-start items-center font-medium text-gray-700 dark:text-gray-300">Webhooks</p>
         </div>
         <div>
           <Button
@@ -68,7 +63,7 @@ const WebhookSection = () => {
           </Button>
         </div>
       </div>
-          <div className="mt-2 flow-root">
+      <div className="w-full mt-2 flow-root">
         <div className="overflow-x-auto">
           <div className="inline-block min-w-full border rounded-lg align-middle">
             <table className="min-w-full divide-y divide-gray-300 dark:divide-gray-400">
@@ -117,9 +112,17 @@ const WebhookSection = () => {
           </div>
         </div>
       </div>
+      <div className="w-full mt-2">
+        <Link
+          className="text-gray-500 text-sm inline-flex flex-row justify-start items-center hover:underline hover:text-blue-600"
+          to="https://usememos.com/docs/advanced-settings/webhook"
+          target="_blank"
+        >
+          {t("common.learn-more")}
+          <Icon.ExternalLink className="inline w-4 h-auto ml-1" />
+        </Link>
       </div>
     </div>
-    </>
   );
 };