From 37d029bb34f4332fcf8aeb6812b8c8669f828cdc Mon Sep 17 00:00:00 2001
From: VeiJitxiaoj <VeiJitxiaoj@users.noreply.github.com>
Date: Sat, 27 Jun 2026 00:36:26 +0800
Subject: [PATCH] Fix collection description edit action layout

---
 .../CollectionOverview/CollectionOverview.tsx | 24 +++++++++----------
 .../collectionOverview.scss                   | 12 +++++++++-
 2 files changed, 22 insertions(+), 14 deletions(-)

diff --git a/app/src/features/apiClient/screens/apiClient/components/views/components/Collection/components/CollectionOverview/CollectionOverview.tsx b/app/src/features/apiClient/screens/apiClient/components/views/components/Collection/components/CollectionOverview/CollectionOverview.tsx
index 48b7614869..b6c95bad51 100644
--- a/app/src/features/apiClient/screens/apiClient/components/views/components/Collection/components/CollectionOverview/CollectionOverview.tsx
+++ b/app/src/features/apiClient/screens/apiClient/components/views/components/Collection/components/CollectionOverview/CollectionOverview.tsx
@@ -2,7 +2,7 @@ import type React from "react";
 import { useCallback, useMemo, useState } from "react";
 import * as Sentry from "@sentry/react";
 import { InlineInput } from "componentsV2/InlineInput/InlineInput";
-import { Input, notification, Tabs } from "antd";
+import { Button, Input, notification, Tabs } from "antd";
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 import remarkGfm from "remark-gfm";
@@ -163,18 +163,16 @@ export const CollectionOverview: React.FC<CollectionOverviewProps> = ({ collecti
               ]}
             />
           ) : (
-            <div
-              className="collection-overview-description-markdown"
-              onClick={() => {
-                if (!isValidPermission) {
-                  return;
-                }
-
-                setShowEditor(true);
-              }}
-            >
-              {markdown}
-            </div>
+            <>
+              {isValidPermission ? (
+                <div className="collection-overview-description-actions">
+                  <Button type="link" size="small" onClick={() => setShowEditor(true)}>
+                    Edit Description
+                  </Button>
+                </div>
+              ) : null}
+              <div className="collection-overview-description-markdown">{markdown}</div>
+            </>
           )}
         </div>
       </div>
diff --git a/app/src/features/apiClient/screens/apiClient/components/views/components/Collection/components/CollectionOverview/collectionOverview.scss b/app/src/features/apiClient/screens/apiClient/components/views/components/Collection/components/CollectionOverview/collectionOverview.scss
index 617cfa4e97..f9415dc05b 100644
--- a/app/src/features/apiClient/screens/apiClient/components/views/components/Collection/components/CollectionOverview/collectionOverview.scss
+++ b/app/src/features/apiClient/screens/apiClient/components/views/components/Collection/components/CollectionOverview/collectionOverview.scss
@@ -47,12 +47,22 @@
       background: var(--requestly-color-surface-0);
     }
 
+    &-actions {
+      display: flex;
+      justify-content: flex-end;
+      margin-bottom: 4px;
+
+      .ant-btn-link {
+        padding: 0;
+        height: auto;
+      }
+    }
+
     &-markdown {
       padding: 8px;
       border-radius: 8px;
 
       &:hover {
-        cursor: text;
         background: var(--requestly-color-surface-0);
       }
     }