feat(FN-4231): restore mobile scroll in AgentDetailView

Restored mobile scroll behavior in AgentDetailView with a CSS fix and added a regression test to guard against future breakage.

Fusion-Task-Id: FN-4231

packages/dashboard/app/components/AgentDetailView.css

@@ -83,6 +83,7 @@
   padding: var(--space-md) calc(var(--space-lg) + var(--space-xs));
   border-bottom: 1px solid var(--border);
   background: var(--bg-secondary);
+  flex-shrink: 0;
 }
 
 /* Identity area: icon + name + badges */
@@ -239,6 +240,7 @@
   padding: 0 calc(var(--space-lg) + var(--space-xs));
   border-bottom: 1px solid var(--border);
   background: var(--bg-secondary);
+  flex-shrink: 0;
 }
 
 .agent-detail-tab {
@@ -275,6 +277,7 @@
 
 .agent-detail-content {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: var(--space-xl);
 }
@@ -288,6 +291,7 @@
   background: var(--bg-secondary);
   font-size: var(--space-md);
   color: var(--text-muted);
+  flex-shrink: 0;
 }
 
 .agent-detail-id {
@@ -1732,6 +1736,8 @@
 
   .agent-detail-content {
     padding: var(--space-lg);
+    -webkit-overflow-scrolling: touch;
+    overscroll-behavior: contain;
   }
 
   .agent-detail-footer {

packages/dashboard/app/components/__tests__/AgentDetailView.mobile-scroll.test.tsx

@@ -0,0 +1,49 @@
+import { beforeEach, describe, expect, it, vi } from "vitest";
+import { render, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { loadAllAppCss } from "../../test/cssFixture";
+import { setupAgentDetailMocks } from "./AgentDetailView.test-helpers";
+import { AgentDetailView } from "../AgentDetailView";
+
+describe("AgentDetailView mobile scroll regression (FN-4231)", () => {
+  beforeEach(() => {
+    setupAgentDetailMocks();
+    document.head.querySelector("style[data-testid='fn-4231-css']")?.remove();
+    const style = document.createElement("style");
+    style.setAttribute("data-testid", "fn-4231-css");
+    style.textContent = loadAllAppCss();
+    document.head.appendChild(style);
+
+    Object.defineProperty(window, "matchMedia", {
+      configurable: true,
+      writable: true,
+      value: vi.fn().mockImplementation((query: string) => ({
+        matches: query.includes("max-width: 768px"),
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    });
+  });
+
+  it("keeps AgentDetailView tab body as the mobile scroll owner (FN-4231)", async () => {
+    render(<AgentDetailView agentId="agent-001" onClose={vi.fn()} addToast={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(document.querySelector(".agent-detail-content")).toBeTruthy();
+    });
+
+    const contentEl = document.querySelector(".agent-detail-content") as HTMLElement;
+    const tabsEl = document.querySelector(".agent-detail-tabs") as HTMLElement;
+    const footerEl = document.querySelector(".agent-detail-footer") as HTMLElement;
+
+    expect(window.getComputedStyle(contentEl).minHeight).toBe("0px");
+    expect(window.getComputedStyle(contentEl).overflowY).toBe("auto");
+    expect(window.getComputedStyle(tabsEl).flexShrink).toBe("0");
+    expect(window.getComputedStyle(footerEl).flexShrink).toBe("0");
+  });
+});