From 13a0fd0a6529b9bb38214181077b712110d7bd91 Mon Sep 17 00:00:00 2001
From: Wenwei Lin <wenwei66.lin@gmail.com>
Date: Wed, 12 Feb 2025 21:39:59 +0800
Subject: [PATCH] fix: Label text was obscured in create agent page

---
 .../src/pages/agents/components/AddAgentPopup.tsx         | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/renderer/src/pages/agents/components/AddAgentPopup.tsx b/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
index 35e30c44b9..04a6a38211 100644
--- a/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
+++ b/src/renderer/src/pages/agents/components/AddAgentPopup.tsx
@@ -14,6 +14,7 @@ import { Button, Form, FormInstance, Input, Modal, Popover, Select, SelectProps
 import TextArea from 'antd/es/input/TextArea'
 import { useRef, useState } from 'react'
 import { useTranslation } from 'react-i18next'
+import stringWidth from 'string-width'
 
 interface Props {
   resolve: (data: Agent | null) => void
@@ -104,6 +105,11 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
     setLoading(false)
   }
 
+  // Compute label width based on the longest label
+  const labelWidth = [t('agents.add.name'), t('agents.add.prompt'), t('agents.add.knowledge_base')]
+    .map((labelText) => stringWidth(labelText) * 8)
+    .reduce((maxWidth, currentWidth) => Math.max(maxWidth, currentWidth), 80)
+
   return (
     <Modal
       title={t('agents.add.title')}
@@ -117,7 +123,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
       <Form
         ref={formRef}
         form={form}
-        labelCol={{ flex: '80px' }}
+        labelCol={{ flex: `${labelWidth}px` }}
         labelAlign="left"
         colon={false}
         style={{ marginTop: 25 }}