From 3c04eeaff919bac1d089b4ad7db0ca2a55351d7e Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Thu, 27 Nov 2025 11:59:46 +0800
Subject: [PATCH] perf: API integration dialog height and enable table
 scrolling (#1805)

* Initial plan

* Fix API integration dialog height and make tables scrollable

Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com>

* Update API integration dialog height for improved layout

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: RockChinQ <45992437+RockChinQ@users.noreply.github.com>
Co-authored-by: Junyan Qin <rockchinq@gmail.com>
---
 .../ApiIntegrationDialog.tsx                   | 18 ++++++++++++------
 1 file changed, 12 insertions(+), 6 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 e4a58f8a..68b36417 100644
--- a/web/src/app/home/components/api-integration-dialog/ApiIntegrationDialog.tsx
+++ b/web/src/app/home/components/api-integration-dialog/ApiIntegrationDialog.tsx
@@ -241,7 +241,7 @@ export default function ApiIntegrationDialog({
           onOpenChange(newOpen);
         }}
       >
-        <DialogContent className="sm:max-w-[800px]">
+        <DialogContent className="sm:max-w-[800px] h-[26rem] flex flex-col">
           <DialogHeader>
             <DialogTitle>{t('common.manageApiIntegration')}</DialogTitle>
           </DialogHeader>
@@ -249,7 +249,7 @@ export default function ApiIntegrationDialog({
           <Tabs
             value={activeTab}
             onValueChange={setActiveTab}
-            className="w-full"
+            className="w-full flex-1 flex flex-col overflow-hidden"
           >
             <TabsList className="shadow-md py-3 bg-[#f0f0f0] dark:bg-[#2a2a2e]">
               <TabsTrigger className="px-5 py-4 cursor-pointer" value="apikeys">
@@ -264,7 +264,10 @@ export default function ApiIntegrationDialog({
             </TabsList>
 
             {/* API Keys Tab */}
-            <TabsContent value="apikeys" className="space-y-4">
+            <TabsContent
+              value="apikeys"
+              className="space-y-4 flex-1 flex flex-col overflow-hidden"
+            >
               <div className="flex items-start gap-2 text-sm text-muted-foreground">
                 {t('common.apiKeyHint')}
               </div>
@@ -289,7 +292,7 @@ export default function ApiIntegrationDialog({
                   {t('common.noApiKeys')}
                 </div>
               ) : (
-                <div className="border rounded-md overflow-x-auto">
+                <div className="border rounded-md overflow-auto flex-1">
                   <Table>
                     <TableHeader>
                       <TableRow>
@@ -351,7 +354,10 @@ export default function ApiIntegrationDialog({
             </TabsContent>
 
             {/* Webhooks Tab */}
-            <TabsContent value="webhooks" className="space-y-4">
+            <TabsContent
+              value="webhooks"
+              className="space-y-4 flex-1 flex flex-col overflow-hidden"
+            >
               <div className="flex items-start gap-2 text-sm text-muted-foreground">
                 {t('common.webhookHint')}
               </div>
@@ -376,7 +382,7 @@ export default function ApiIntegrationDialog({
                   {t('common.noWebhooks')}
                 </div>
               ) : (
-                <div className="border rounded-md overflow-x-auto max-w-full">
+                <div className="border rounded-md overflow-auto flex-1 max-w-full">
                   <Table className="table-fixed w-full">
                     <TableHeader>
                       <TableRow>