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
This commit is contained in:
gsxdsm
2026-06-14 11:35:22 -07:00
parent e526ad2b2c
commit b7c23c09c3
2 changed files with 21 additions and 0 deletions

View File

@@ -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;
}

View File

@@ -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,