From 763c1a885cd22bfc5ccb4cbc1e7d024873e921ca Mon Sep 17 00:00:00 2001
From: Junyan Qin <rockchinq@gmail.com>
Date: Thu, 20 Nov 2025 16:48:06 +0800
Subject: [PATCH] perf: url display in webhook dialog

---
 .../ApiIntegrationDialog.tsx                  | 48 +++++++++++++------
 1 file changed, 33 insertions(+), 15 deletions(-)

diff --git a/web/src/app/home/components/api-integration-dialog/ApiIntegrationDialog.tsx b/web/src/app/home/components/api-integration-dialog/ApiIntegrationDialog.tsx
index 078d7dea..e4a58f8a 100644
--- a/web/src/app/home/components/api-integration-dialog/ApiIntegrationDialog.tsx
+++ b/web/src/app/home/components/api-integration-dialog/ApiIntegrationDialog.tsx
@@ -289,12 +289,16 @@ export default function ApiIntegrationDialog({
                   {t('common.noApiKeys')}
                 </div>
               ) : (
-                <div className="border rounded-md">
+                <div className="border rounded-md overflow-x-auto">
                   <Table>
                     <TableHeader>
                       <TableRow>
-                        <TableHead>{t('common.name')}</TableHead>
-                        <TableHead>{t('common.apiKeyValue')}</TableHead>
+                        <TableHead className="min-w-[120px]">
+                          {t('common.name')}
+                        </TableHead>
+                        <TableHead className="min-w-[200px]">
+                          {t('common.apiKeyValue')}
+                        </TableHead>
                         <TableHead className="w-[100px]">
                           {t('common.actions')}
                         </TableHead>
@@ -372,16 +376,20 @@ export default function ApiIntegrationDialog({
                   {t('common.noWebhooks')}
                 </div>
               ) : (
-                <div className="border rounded-md">
-                  <Table>
+                <div className="border rounded-md overflow-x-auto max-w-full">
+                  <Table className="table-fixed w-full">
                     <TableHeader>
                       <TableRow>
-                        <TableHead>{t('common.name')}</TableHead>
-                        <TableHead>{t('common.webhookUrl')}</TableHead>
+                        <TableHead className="w-[150px]">
+                          {t('common.name')}
+                        </TableHead>
+                        <TableHead className="w-[380px]">
+                          {t('common.webhookUrl')}
+                        </TableHead>
                         <TableHead className="w-[80px]">
                           {t('common.webhookEnabled')}
                         </TableHead>
-                        <TableHead className="w-[100px]">
+                        <TableHead className="w-[80px]">
                           {t('common.actions')}
                         </TableHead>
                       </TableRow>
@@ -389,20 +397,30 @@ export default function ApiIntegrationDialog({
                     <TableBody>
                       {webhooks.map((webhook) => (
                         <TableRow key={webhook.id}>
-                          <TableCell>
-                            <div>
-                              <div className="font-medium">{webhook.name}</div>
+                          <TableCell className="truncate">
+                            <div className="truncate">
+                              <div
+                                className="font-medium truncate"
+                                title={webhook.name}
+                              >
+                                {webhook.name}
+                              </div>
                               {webhook.description && (
-                                <div className="text-sm text-muted-foreground">
+                                <div
+                                  className="text-sm text-muted-foreground truncate"
+                                  title={webhook.description}
+                                >
                                   {webhook.description}
                                 </div>
                               )}
                             </div>
                           </TableCell>
                           <TableCell>
-                            <code className="text-sm bg-muted px-2 py-1 rounded break-all">
-                              {webhook.url}
-                            </code>
+                            <div className="overflow-x-auto max-w-[380px]">
+                              <code className="text-sm bg-muted px-2 py-1 rounded whitespace-nowrap inline-block">
+                                {webhook.url}
+                              </code>
+                            </div>
                           </TableCell>
                           <TableCell>
                             <Switch