From 8a05af0342e5c61bd1c0e9d1ddc3791c204be771 Mon Sep 17 00:00:00 2001
From: Jiayuan Zhang <forrestchang7@gmail.com>
Date: Sun, 12 Jul 2026 03:36:13 +0800
Subject: [PATCH] fix(agents): pin capability/settings sub-nav while content
 scrolls (MUL-4426) (#5280)

The agent detail page wrapped both the sidebar rail and the content pane
in one scroll container, so scrolling any Capabilities/Settings tab
dragged the Instructions/Skills/MCP rail out of view. Split scrolling on
md+ like settings-page.tsx: the outer container stops scrolling and each
pane scrolls itself. Below md the page still scrolls as one, and the
Overview/Work views keep whole-page scrolling.

Co-authored-by: Lambda <lambda@multica.ai>
Co-authored-by: multica-agent <github@multica.ai>
---
 .../agents/components/agent-overview-pane.tsx   | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/packages/views/agents/components/agent-overview-pane.tsx b/packages/views/agents/components/agent-overview-pane.tsx
index 25030a8e50..1aaa23087f 100644
--- a/packages/views/agents/components/agent-overview-pane.tsx
+++ b/packages/views/agents/components/agent-overview-pane.tsx
@@ -297,6 +297,7 @@ export function AgentOverviewPane({
   const activeSecondaryTab = secondaryTabs.find(
     (tab) => tab.id === effectiveView,
   );
+  const isSecondaryLayout = secondaryTabs.length > 0 && activeSecondaryTab != null;
 
   return (
     <div className="flex min-h-0 flex-1 flex-col bg-background">
@@ -326,7 +327,15 @@ export function AgentOverviewPane({
         </div>
       </div>
 
-      <div className="min-h-0 flex-1 overflow-y-auto">
+      {/* Overview/Work scroll as one page. Sidebar views split scrolling on
+          md+ (nav rail pinned, content pane scrolls) like settings-page.tsx;
+          below md the rail is a horizontal strip and the page scrolls whole. */}
+      <div
+        className={cn(
+          "min-h-0 flex-1 overflow-y-auto",
+          isSecondaryLayout && "md:overflow-hidden",
+        )}
+      >
         {effectiveView === "overview" && (
           <div className="mx-auto max-w-[1440px] p-4 sm:p-6">
             <div className="grid gap-6 xl:grid-cols-[minmax(0,1fr)_320px]">
@@ -347,8 +356,8 @@ export function AgentOverviewPane({
         )}
 
         {secondaryTabs.length > 0 && activeSecondaryTab && (
-          <div className="flex min-h-full flex-col md:flex-row">
-            <aside className="shrink-0 overflow-x-auto border-b border-surface-border bg-app-shell/70 p-2 md:w-52 md:overflow-x-visible md:border-b-0 md:border-r md:p-4">
+          <div className="flex min-h-full flex-col md:h-full md:flex-row">
+            <aside className="shrink-0 overflow-x-auto border-b border-surface-border bg-app-shell/70 p-2 md:w-52 md:overflow-y-auto md:border-b-0 md:border-r md:p-4">
               <div
                 className="flex w-max min-w-full items-center gap-1 md:w-full md:flex-col md:items-stretch"
                 role="tablist"
@@ -378,7 +387,7 @@ export function AgentOverviewPane({
               </div>
             </aside>
 
-            <section className="min-w-0 flex-1">
+            <section className="min-w-0 flex-1 md:overflow-y-auto">
               <div className="mx-auto w-full max-w-3xl p-4 sm:p-6 md:p-8">
                 <header>
                   <h2 className="text-base font-medium text-balance">