From d68fe3e9f8479b2816abd03ad3123f5a8b9b855b Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Wed, 10 Jun 2026 23:34:52 -0700
Subject: [PATCH] FN-6209: fix tablet tab overflow in agent detail

Keep agent detail tabs usable without page-wide horizontal scrolling at tablet widths.

- Make the agent detail tabs row horizontally scrollable with hidden scrollbars and touch momentum.
- Prevent tab labels from wrapping so the tab strip can overflow within its own container.
- Add a regression test covering tablet-width tab overflow styles.

Files changed:
 .../dashboard/app/components/AgentDetailView.css   |  8 +++++
 .../AgentDetailView.mobile-scroll.test.tsx         | 34 +++++++++++++++++++++-
 2 files changed, 41 insertions(+), 1 deletion(-)

Fusion-Task-Id: FN-6209

Fusion-Task-Lineage: 7646bea2-b63a-460f-813b-cf9808680d46
---
 .../app/components/AgentDetailView.css        |  8 +++++
 .../AgentDetailView.mobile-scroll.test.tsx    | 34 ++++++++++++++++++-
 2 files changed, 41 insertions(+), 1 deletion(-)

diff --git a/packages/dashboard/app/components/AgentDetailView.css b/packages/dashboard/app/components/AgentDetailView.css
index f56125c1e2..6eeab880fb 100644
--- a/packages/dashboard/app/components/AgentDetailView.css
+++ b/packages/dashboard/app/components/AgentDetailView.css
@@ -241,6 +241,13 @@
   border-bottom: 1px solid var(--border);
   background: var(--bg-secondary);
   flex-shrink: 0;
+  overflow-x: auto;
+  -webkit-overflow-scrolling: touch;
+  scrollbar-width: none;
+}
+
+.agent-detail-tabs::-webkit-scrollbar {
+  display: none;
 }
 
 .agent-detail-tab {
@@ -255,6 +262,7 @@
   font-size: calc(var(--space-sm) + var(--space-xs) + var(--space-xs) * 0.25);
   cursor: pointer;
   transition: all var(--transition-fast);
+  white-space: nowrap;
 }
 
 .agent-detail-tab:hover {
diff --git a/packages/dashboard/app/components/__tests__/AgentDetailView.mobile-scroll.test.tsx b/packages/dashboard/app/components/__tests__/AgentDetailView.mobile-scroll.test.tsx
index a840c5ac92..8045ba98ef 100644
--- a/packages/dashboard/app/components/__tests__/AgentDetailView.mobile-scroll.test.tsx
+++ b/packages/dashboard/app/components/__tests__/AgentDetailView.mobile-scroll.test.tsx
@@ -1,7 +1,7 @@
 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 { loadAllAppCss, loadAllAppCssBaseOnly } from "../../test/cssFixture";
 import { setupAgentDetailMocks } from "./AgentDetailView.test-helpers";
 import { AgentDetailView } from "../AgentDetailView";
 
@@ -46,4 +46,36 @@ describe("AgentDetailView mobile scroll regression (FN-4231)", () => {
     expect(window.getComputedStyle(tabsEl).flexShrink).toBe("0");
     expect(window.getComputedStyle(footerEl).flexShrink).toBe("0");
   });
+
+  it("tabs are horizontally scrollable at tablet widths (FN-6209)", async () => {
+    Object.defineProperty(window, "matchMedia", {
+      configurable: true,
+      writable: true,
+      value: vi.fn().mockImplementation((query: string) => ({
+        matches: false,
+        media: query,
+        onchange: null,
+        addListener: vi.fn(),
+        removeListener: vi.fn(),
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+        dispatchEvent: vi.fn(),
+      })),
+    });
+
+    const style = document.head.querySelector("style[data-testid='fn-4231-css']") as HTMLStyleElement;
+    style.textContent = loadAllAppCssBaseOnly();
+
+    render(<AgentDetailView agentId="agent-001" onClose={vi.fn()} addToast={vi.fn()} />);
+
+    await waitFor(() => {
+      expect(document.querySelector(".agent-detail-tabs")).toBeTruthy();
+    });
+
+    const tabsEl = document.querySelector(".agent-detail-tabs") as HTMLElement;
+    const tabEl = document.querySelector(".agent-detail-tab") as HTMLElement;
+
+    expect(window.getComputedStyle(tabsEl).overflowX).toBe("auto");
+    expect(window.getComputedStyle(tabEl).whiteSpace).toBe("nowrap");
+  });
 });