From b7c23c09c36b526cd6d4eaca153cb09bba330e79 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Sun, 14 Jun 2026 11:35:22 -0700
Subject: [PATCH] FN-6450: enable touch scrolling for agent detail tabs

Enable mobile users to swipe across the agent detail tab strip.

- Restores horizontal touch panning on the agent detail tabs while preserving vertical pan behavior.
- Documents the mobile touch-action requirement next to the tab-strip CSS.
- Adds a mobile regression test covering pan-x touch-action and horizontal overflow.

Files changed:
 packages/dashboard/app/components/AgentDetailView.css     |  6 ++++++
 .../__tests__/AgentDetailView.mobile-scroll.test.tsx      | 15 +++++++++++++++
 2 files changed, 21 insertions(+)

Fusion-Task-Id: FN-6450
Fusion-Task-Lineage: 7006af83-4490-4fe0-a357-7d19b7b522c0
---
 .../dashboard/app/components/AgentDetailView.css  |  6 ++++++
 .../AgentDetailView.mobile-scroll.test.tsx        | 15 +++++++++++++++
 2 files changed, 21 insertions(+)

diff --git a/packages/dashboard/app/components/AgentDetailView.css b/packages/dashboard/app/components/AgentDetailView.css
index 6eeab880fb..0fb2591b66 100644
--- a/packages/dashboard/app/components/AgentDetailView.css
+++ b/packages/dashboard/app/components/AgentDetailView.css
@@ -234,6 +234,11 @@
   gap: var(--space-sm);
 }
 
+/*
+FNXC:AgentDetailView 2026-06-14-11:22:
+The mobile global `* { touch-action: pan-y; }` lock from FN-6365 prevents horizontal swipe gestures unless each known horizontal scroller opts back into pan-x.
+The overflowing agent-detail tab strip must keep horizontal touch panning enabled so all tabs remain reachable on narrow touch viewports (FN-6450).
+*/
 .agent-detail-tabs {
   display: flex;
   gap: var(--space-xs);
@@ -242,6 +247,7 @@
   background: var(--bg-secondary);
   flex-shrink: 0;
   overflow-x: auto;
+  touch-action: pan-x pan-y;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
 }
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 8045ba98ef..d6c35f183a 100644
--- a/packages/dashboard/app/components/__tests__/AgentDetailView.mobile-scroll.test.tsx
+++ b/packages/dashboard/app/components/__tests__/AgentDetailView.mobile-scroll.test.tsx
@@ -47,6 +47,21 @@ describe("AgentDetailView mobile scroll regression (FN-4231)", () => {
     expect(window.getComputedStyle(footerEl).flexShrink).toBe("0");
   });
 
+  it("tabs accept horizontal touch panning on mobile (FN-6450)", async () => {
+    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 tabsStyle = window.getComputedStyle(tabsEl);
+
+    expect(tabsStyle.touchAction).toBe("pan-x pan-y");
+    expect(tabsStyle.touchAction).toContain("pan-x");
+    expect(tabsStyle.overflowX).toBe("auto");
+  });
+
   it("tabs are horizontally scrollable at tablet widths (FN-6209)", async () => {
     Object.defineProperty(window, "matchMedia", {
       configurable: true,