From d0e7a9ac9c3f9d5132fc2dd0efb1f4a4ade581e0 Mon Sep 17 00:00:00 2001
From: Chandrasekharan M <chandrasekharan@zipstack.com>
Date: Tue, 31 Mar 2026 02:34:52 +0530
Subject: [PATCH 1/2] [FIX] Fix tiny action buttons in Prompt Studio settings
 and document modals

The Vite migration bumped antd from 5.13.2 to 5.29.3. Newer antd no
longer sizes icon-only buttons correctly when icons are passed as
children instead of using the `icon` prop. Also fixes `classID` (invalid
React prop) that was used instead of `className` since initial commit.

- Use antd `icon` prop for all icon-only buttons in ManageLlmProfiles
  and ManageDocsModal
- Merge delete button into Actions column in ManageDocsModal (was a
  separate unlabeled column)
- Add "Select Default" header to document selection column
- Constrain Actions and Select Default column widths so document names
  take most space
- Remove unused `.manage-llm-pro-icon` CSS class (10px font-size)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../manage-docs-modal/ManageDocsModal.jsx     | 53 ++++++++-----------
 .../manage-llm-profiles/ManageLlmProfiles.css |  4 --
 .../manage-llm-profiles/ManageLlmProfiles.jsx | 18 +++----
 3 files changed, 28 insertions(+), 47 deletions(-)

diff --git a/frontend/src/components/custom-tools/manage-docs-modal/ManageDocsModal.jsx b/frontend/src/components/custom-tools/manage-docs-modal/ManageDocsModal.jsx
index 29d7d533e2..efd5285107 100644
--- a/frontend/src/components/custom-tools/manage-docs-modal/ManageDocsModal.jsx
+++ b/frontend/src/components/custom-tools/manage-docs-modal/ManageDocsModal.jsx
@@ -382,19 +382,14 @@ function ManageDocsModal({
       title: "Actions",
       dataIndex: "reindex",
       key: "reindex",
-      width: 200,
+      width: 120,
     },
     {
-      title: "",
-      dataIndex: "delete",
-      key: "delete",
-      width: 30,
-    },
-    {
-      title: "",
+      title: "Select Default",
       dataIndex: "select",
       key: "select",
-      width: 30,
+      align: "center",
+      width: 120,
     },
   ];
 
@@ -496,33 +491,29 @@ function ManageDocsModal({
                 </Tooltip>
               )}
             </div>
+            <ConfirmModal
+              handleConfirm={() => handleDelete(item?.document_id)}
+              content="The document will be permanently deleted."
+            >
+              <Tooltip title="Delete">
+                <Button
+                  size="small"
+                  icon={<DeleteOutlined />}
+                  disabled={
+                    isMultiPassExtractLoading ||
+                    isSinglePassExtractLoading ||
+                    indexDocs.includes(item?.document_id) ||
+                    isUploading ||
+                    isPublicSource
+                  }
+                />
+              </Tooltip>
+            </ConfirmModal>
             <div className="center">
               {infoIndex(indexMessages?.[item?.document_name])}
             </div>
           </Space>
         ),
-        delete: (
-          <ConfirmModal
-            handleConfirm={() => handleDelete(item?.document_id)}
-            content="The document will be permanently deleted."
-          >
-            <Tooltip title="Delete">
-              <Button
-                size="small"
-                className="display-flex-align-center"
-                disabled={
-                  isMultiPassExtractLoading ||
-                  isSinglePassExtractLoading ||
-                  indexDocs.includes(item?.document_id) ||
-                  isUploading ||
-                  isPublicSource
-                }
-              >
-                <DeleteOutlined className="manage-llm-pro-icon" />
-              </Button>
-            </Tooltip>
-          </ConfirmModal>
-        ),
         select: (
           <Radio
             checked={selectedDoc?.document_id === item?.document_id}
diff --git a/frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.css b/frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.css
index 9047649d1f..56cf5658e8 100644
--- a/frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.css
+++ b/frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.css
@@ -1,9 +1,5 @@
 /* Styles for ManageLlmProfiles */
 
-.manage-llm-pro-icon {
-  font-size: 10px;
-}
-
 .action-buttons-container {
   display: flex;
   align-items: center;
diff --git a/frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.jsx b/frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.jsx
index d3744584f7..aab5e8558e 100644
--- a/frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.jsx
+++ b/frontend/src/components/custom-tools/manage-llm-profiles/ManageLlmProfiles.jsx
@@ -122,20 +122,16 @@ function ManageLlmProfiles() {
             <Tooltip title="Copy Profile ID">
               <Button
                 size="small"
-                className="display-flex-align-center"
+                icon={<CopyOutlined />}
                 onClick={() => copyProfileId(item?.profile_id)}
-              >
-                <CopyOutlined classID="manage-llm-pro-icon" />
-              </Button>
+              />
             </Tooltip>
             <Button
               size="small"
-              className="display-flex-align-center"
+              icon={<EditOutlined />}
               disabled={isPublicSource}
               onClick={() => handleEdit(item?.profile_id)}
-            >
-              <EditOutlined classID="manage-llm-pro-icon" />
-            </Button>
+            />
             <ConfirmModal
               handleConfirm={() => handleDelete(item?.profile_id)}
               content="The LLM profile will be permanently deleted."
@@ -148,13 +144,11 @@ function ManageLlmProfiles() {
               >
                 <Button
                   size="small"
-                  className="display-flex-align-center"
+                  icon={<DeleteOutlined />}
                   disabled={
                     isPublicSource || defaultLlmProfile === item?.profile_id
                   }
-                >
-                  <DeleteOutlined classID="manage-llm-pro-icon" />
-                </Button>
+                />
               </Tooltip>
             </ConfirmModal>
           </div>

From d264ad852d3b9821769ae6395adb67bd829921d4 Mon Sep 17 00:00:00 2001
From: Chandrasekharan M <chandrasekharan@zipstack.com>
Date: Tue, 31 Mar 2026 03:21:17 +0530
Subject: [PATCH 2/2] [FIX] Fix icon-only buttons across remaining components
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Same antd 5.29.3 regression — use `icon` prop instead of children for
icon-only buttons in PlatformSettings, HeaderTitle, Prompt, and
DisplayNotifications.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 frontend/src/components/agency/prompt/Prompt.jsx       | 10 ++++------
 .../custom-tools/header-title/HeaderTitle.jsx          |  4 +---
 .../notification-modal/DisplayNotifications.jsx        |  9 +++------
 .../components/settings/platform/PlatformSettings.jsx  |  5 ++---
 4 files changed, 10 insertions(+), 18 deletions(-)

diff --git a/frontend/src/components/agency/prompt/Prompt.jsx b/frontend/src/components/agency/prompt/Prompt.jsx
index f24001d55f..83940b5a84 100644
--- a/frontend/src/components/agency/prompt/Prompt.jsx
+++ b/frontend/src/components/agency/prompt/Prompt.jsx
@@ -88,10 +88,9 @@ function Prompt() {
               <Button
                 size="small"
                 type="text"
+                icon={<MinusOutlined />}
                 onClick={() => setIsPromptOpen(false)}
-              >
-                <MinusOutlined />
-              </Button>
+              />
             </div>
           </div>
           <div className="wf-prompt-textarea">
@@ -122,10 +121,9 @@ function Prompt() {
             <Button
               size="small"
               type="text"
+              icon={<EditOutlined />}
               onClick={() => setIsPromptOpen(true)}
-            >
-              <EditOutlined />
-            </Button>
+            />
           </div>
         </div>
       )}
diff --git a/frontend/src/components/custom-tools/header-title/HeaderTitle.jsx b/frontend/src/components/custom-tools/header-title/HeaderTitle.jsx
index cdee23ef8e..03b84b4a7e 100644
--- a/frontend/src/components/custom-tools/header-title/HeaderTitle.jsx
+++ b/frontend/src/components/custom-tools/header-title/HeaderTitle.jsx
@@ -26,9 +26,7 @@ function HeaderTitle() {
         <Typography.Text className="custom-tools-name" strong>
           {details?.tool_name}
         </Typography.Text>
-        <Button size="small" type="text" disabled>
-          <EditOutlined />
-        </Button>
+        <Button size="small" type="text" icon={<EditOutlined />} disabled />
       </div>
     </div>
   );
diff --git a/frontend/src/components/pipelines-or-deployments/notification-modal/DisplayNotifications.jsx b/frontend/src/components/pipelines-or-deployments/notification-modal/DisplayNotifications.jsx
index 60020a4510..9754dd20ab 100644
--- a/frontend/src/components/pipelines-or-deployments/notification-modal/DisplayNotifications.jsx
+++ b/frontend/src/components/pipelines-or-deployments/notification-modal/DisplayNotifications.jsx
@@ -48,10 +48,9 @@ function DisplayNotifications({
               <Button
                 type="text"
                 size="small"
+                icon={<EditOutlined />}
                 onClick={() => handleEdit(record)}
-              >
-                <EditOutlined />
-              </Button>
+              />
             </Tooltip>
           </Space>
           <Space className="actions">
@@ -60,9 +59,7 @@ function DisplayNotifications({
                 handleConfirm={() => handleDelete(record?.id, record?.name)}
                 content="Are you sure you want to delete?"
               >
-                <Button type="text" size="small">
-                  <DeleteOutlined />
-                </Button>
+                <Button type="text" size="small" icon={<DeleteOutlined />} />
               </ConfirmModal>
             </Tooltip>
           </Space>
diff --git a/frontend/src/components/settings/platform/PlatformSettings.jsx b/frontend/src/components/settings/platform/PlatformSettings.jsx
index c7010fa9db..bdc996a6ae 100644
--- a/frontend/src/components/settings/platform/PlatformSettings.jsx
+++ b/frontend/src/components/settings/platform/PlatformSettings.jsx
@@ -317,11 +317,10 @@ function PlatformSettings() {
                               >
                                 <Button
                                   size="small"
+                                  icon={<DeleteOutlined />}
                                   disabled={keyDetails?.id === null}
                                   loading={isDeletingIndex === keyIndex}
-                                >
-                                  <DeleteOutlined />
-                                </Button>
+                                />
                               </ConfirmModal>
                             </Col>
                           </Row>