From a841486c5e33fef970431279557b77c7a9bab29b Mon Sep 17 00:00:00 2001
From: suyua9 <1521777066@qq.com>
Date: Sat, 4 Apr 2026 05:33:46 +0800
Subject: [PATCH] fix(agent-flows): keep flow menu visible in narrow windows
 (#5341)

* fix(agent-flows): keep flow menu visible in narrow windows

* fix(agent-flows): prevent gear menu text clipping

Signed-off-by: suyua9 <1521777066@qq.com>

---------

Signed-off-by: suyua9 <1521777066@qq.com>
Co-authored-by: Timothy Carambat <rambat1010@gmail.com>
---
 frontend/src/pages/Admin/Agents/AgentFlows/FlowPanel.jsx | 6 +++---
 frontend/src/pages/Admin/Agents/index.jsx                | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/pages/Admin/Agents/AgentFlows/FlowPanel.jsx b/frontend/src/pages/Admin/Agents/AgentFlows/FlowPanel.jsx
index 89fe7743..64af5bc9 100644
--- a/frontend/src/pages/Admin/Agents/AgentFlows/FlowPanel.jsx
+++ b/frontend/src/pages/Admin/Agents/AgentFlows/FlowPanel.jsx
@@ -50,20 +50,20 @@ function ManageFlowMenu({ flow, onDelete }) {
         <Gear className="h-5 w-5" weight="bold" />
       </button>
       {open && (
-        <div className="absolute w-[100px] -top-1 left-7 mt-1 border-[1.5px] border-white/40 rounded-lg bg-theme-action-menu-bg flex flex-col shadow-[0_4px_14px_rgba(0,0,0,0.25)] text-white z-99 md:z-10">
+        <div className="absolute min-w-[140px] top-full right-0 mt-1 border-[1.5px] border-white/40 rounded-lg bg-theme-action-menu-bg flex flex-col shadow-[0_4px_14px_rgba(0,0,0,0.25)] text-white z-99 md:z-10">
           <button
             type="button"
             onClick={() => navigate(paths.agents.editAgent(flow.uuid))}
             className="border-none flex items-center rounded-lg gap-x-2 hover:bg-theme-action-menu-item-hover py-1.5 px-2 transition-colors duration-200 w-full text-left"
           >
-            <span className="text-sm">Edit Flow</span>
+            <span className="text-sm whitespace-nowrap">Edit Flow</span>
           </button>
           <button
             type="button"
             onClick={deleteFlow}
             className="border-none flex items-center rounded-lg gap-x-2 hover:bg-theme-action-menu-item-hover py-1.5 px-2 transition-colors duration-200 w-full text-left"
           >
-            <span className="text-sm">Delete Flow</span>
+            <span className="text-sm whitespace-nowrap">Delete Flow</span>
           </button>
         </div>
       )}
diff --git a/frontend/src/pages/Admin/Agents/index.jsx b/frontend/src/pages/Admin/Agents/index.jsx
index a598e1eb..6430f323 100644
--- a/frontend/src/pages/Admin/Agents/index.jsx
+++ b/frontend/src/pages/Admin/Agents/index.jsx
@@ -429,7 +429,7 @@ export default function AdminAgents() {
                   </button>
                 </div>
                 <div className="flex-1 overflow-y-auto p-4">
-                  <div className=" bg-theme-bg-secondary text-white rounded-xl p-4 overflow-y-scroll no-scroll">
+                  <div className=" bg-theme-bg-secondary text-white rounded-xl p-4 overflow-y-scroll overflow-x-visible no-scroll">
                     {SelectedSkillComponent ? (
                       <>
                         {selectedMcpServer ? (
@@ -624,7 +624,7 @@ export default function AdminAgents() {
 
         {/* Selected agent skill setting panel */}
         <div className="flex-[2] flex flex-col gap-y-[18px] mt-10">
-          <div className="bg-theme-bg-secondary text-white rounded-xl flex-1 p-4 overflow-y-scroll no-scroll">
+          <div className="bg-theme-bg-secondary text-white rounded-xl flex-1 p-4 overflow-y-scroll overflow-x-visible no-scroll">
             {SelectedSkillComponent ? (
               <>
                 {selectedMcpServer ? (