From 7b0b145159437fad9bb1c4ec32327330cfb62b79 Mon Sep 17 00:00:00 2001
From: alexsr1 <99285240+alexsr1@users.noreply.github.com>
Date: Mon, 31 Aug 2026 15:42:52 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=AA=81=20fix:=20Keep=20Tool=20Flyouts=20i?=
 =?UTF-8?q?n=20View=20(#15404)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix: keep tools menu submenus within the viewport

* fix: let the viewport cap override the submenu min-width
---
 client/src/components/Chat/Input/ArtifactsSubMenu.tsx | 5 ++++-
 client/src/components/Chat/Input/MCPSubMenu.tsx       | 4 +++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/client/src/components/Chat/Input/ArtifactsSubMenu.tsx b/client/src/components/Chat/Input/ArtifactsSubMenu.tsx
index 2166cb669a..5ba64de6ce 100644
--- a/client/src/components/Chat/Input/ArtifactsSubMenu.tsx
+++ b/client/src/components/Chat/Input/ArtifactsSubMenu.tsx
@@ -89,8 +89,11 @@ const ArtifactsSubMenu = React.forwardRef<HTMLButtonElement, ArtifactsSubMenuPro
             <Ariakit.Menu
               portal={true}
               unmountOnHide={true}
+              gutter={12}
+              shift={24}
+              flip="left bottom-end top-end"
               className={cn(
-                'animate-popover-left z-40 ml-3 mt-6 flex min-w-[250px] flex-col rounded-xl',
+                'animate-popover-left z-40 flex min-w-[min(250px,calc(100vw-1rem))] max-w-[calc(100vw-1rem)] flex-col rounded-xl',
                 'border border-border-light bg-surface-secondary shadow-lg',
               )}
             >
diff --git a/client/src/components/Chat/Input/MCPSubMenu.tsx b/client/src/components/Chat/Input/MCPSubMenu.tsx
index c66a6d9df2..9a53386567 100644
--- a/client/src/components/Chat/Input/MCPSubMenu.tsx
+++ b/client/src/components/Chat/Input/MCPSubMenu.tsx
@@ -89,9 +89,11 @@ const MCPSubMenu = React.forwardRef<HTMLButtonElement, MCPSubMenuProps>(
           <Ariakit.Menu
             portal={true}
             unmountOnHide={true}
+            gutter={12}
+            flip="left bottom-end top-end"
             aria-label={localize('com_ui_mcp_servers')}
             className={cn(
-              'animate-popover-left z-40 ml-3 flex min-w-[260px] max-w-[320px] flex-col rounded-xl',
+              'animate-popover-left z-40 flex min-w-[min(260px,calc(100vw-1rem))] max-w-[min(320px,calc(100vw-1rem))] flex-col rounded-xl',
               'border border-border-light bg-presentation p-1.5 shadow-lg',
             )}
           >