🐛 Set the agent configuration page outer scrollbar to be hidden and the inner scrollbar to be displayed

Author: Phinease

frontend/app/[locale]/agents/AgentConfiguration.tsx

@@ -546,6 +546,7 @@ export default forwardRef<AgentConfigHandle, AgentConfigProps>(function AgentCon
           style={{
             height: SETUP_PAGE_CONTAINER.MAIN_CONTENT_HEIGHT,
             ...STANDARD_CARD.CONTENT_SCROLL,
+            overflow: "hidden"
           }}
         >
           <div style={{ padding: STANDARD_CARD.PADDING, height: "100%" }}>

frontend/app/[locale]/agents/components/AgentSetupOrchestrator.tsx

@@ -2099,9 +2099,22 @@ export default function AgentSetupOrchestrator({
     <TooltipProvider>
       <div className="h-full relative px-2">
         {/* Three-column layout using Ant Design Grid */}
-        <Row gutter={[16, 16]} className="h-full">
+        <Row
+          gutter={[16, 16]}
+          className="h-full"
+          align="stretch"
+          style={{ minHeight: 0 }}
+        >
           {/* Left column: SubAgentPool */}
-          <Col xs={24} sm={24} md={24} lg={24} xl={8} className="flex flex-col" style={{ minHeight: '400px' }}>
+          <Col
+            xs={24}
+            sm={24}
+            md={24}
+            lg={24}
+            xl={8}
+            className="flex flex-col h-full"
+            style={{ height: "100%", minHeight: 0 }}
+          >
             <SubAgentPool
               onEditAgent={(agent) => handleEditAgent(agent, t)}
               onCreateNewAgent={() => confirmOrRun(handleCreateNewAgent)}
@@ -2125,7 +2138,15 @@ export default function AgentSetupOrchestrator({
           </Col>
 
           {/* Middle column: Agent capability configuration */}
-          <Col xs={24} sm={24} md={24} lg={24} xl={8} className="flex flex-col" style={{ minHeight: '400px' }}>
+          <Col
+            xs={24}
+            sm={24}
+            md={24}
+            lg={24}
+            xl={8}
+            className="flex flex-col h-full"
+            style={{ height: "100%", minHeight: 0 }}
+          >
             {/* Header: Configure Agent Capabilities */}
             <div className="flex justify-between items-center mb-2">
               <div className="flex items-center">
@@ -2209,7 +2230,15 @@ export default function AgentSetupOrchestrator({
           </Col>
 
           {/* Right column: System Prompt Display */}
-          <Col xs={24} sm={24} md={24} lg={24} xl={8} className="flex flex-col" style={{ minHeight: '400px' }}>
+          <Col
+            xs={24}
+            sm={24}
+            md={24}
+            lg={24}
+            xl={8}
+            className="flex flex-col h-full"
+            style={{ height: "100%", minHeight: "400px" }}
+          >
             <PromptManager
               onDebug={onDebug ? () => confirmOrRun(() => onDebug()) : () => {}}
               agentId={

frontend/app/[locale]/agents/components/agent/SubAgentPool.tsx

@@ -141,8 +141,8 @@ export default function SubAgentPool({
           }
         }
       `}</style>
-      <div className="flex flex-col h-full min-h-[300px] lg:min-h-0 overflow-hidden">
-        <div className="flex justify-between items-center mb-2">
+      <div className="flex flex-col h-full min-h-[300px] lg:min-h-0 max-h-full overflow-hidden">
+        <div className="flex justify-between items-center mb-2 flex-shrink-0">
           <div className="flex items-center">
             <div className="flex items-center justify-center w-6 h-6 rounded-full bg-blue-500 text-white text-sm font-medium mr-2">
               1
@@ -159,7 +159,10 @@ export default function SubAgentPool({
             )}
           </div>
         </div>
-        <ScrollArea className="flex-1 min-h-0 border-t pt-2 pb-2">
+        <ScrollArea
+          className="flex-1 min-h-0 max-h-full h-full border-t pt-2 pb-2"
+          style={{ height: "100%" }}
+        >
           <div className="flex flex-col pr-2">
             {/* Function operation block */}
             <div className="mb-4">

frontend/app/[locale]/agents/components/tool/ToolPool.tsx

@@ -703,7 +703,7 @@ function ToolPool({
           {t("toolPool.error.unavailableSelected")}
         </div>
       )}
-      <div className="flex-1 min-h-0 border-t pt-2 pb-2 overflow-hidden">
+      <div className="flex-1 min-h-0 border-t pt-2 pb-2">
         {loadingTools ? (
           <div className="flex items-center justify-center h-full">
             <span className="text-gray-500">{t("toolPool.loadingTools")}</span>