From c0d53530cf5efce3937c1b10991c7be67d67527a Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Fri, 26 Jun 2026 01:19:55 -0700 Subject: [PATCH] FN-7052: restore Agent Detail tab touch panning Restore mobile horizontal panning from direct touches on Agent Detail tab buttons. - Apply pan-x touch-action to Agent Detail tab buttons alongside the tab strip. - Cover both base and mobile tab styles so the global mobile pan-y lock does not block button-origin swipes. - Extend the mobile scroll regression test to assert tab buttons expose horizontal touch panning. - Add a patch changeset for the published CLI package. Files changed: .changeset/fn-7052-agent-detail-mobile-tab-touch-action.md | 7 +++++++ packages/dashboard/app/components/AgentDetailView.css | 5 +++++ .../components/__tests__/AgentDetailView.mobile-scroll.test.tsx | 8 ++++++-- 3 files changed, 18 insertions(+), 2 deletions(-) Fusion-Task-Id: FN-7052 Fusion-Task-Lineage: 42921948-f940-46d6-8c86-c159e94603b5 --- .../fn-7052-agent-detail-mobile-tab-touch-action.md | 7 +++++++ packages/dashboard/app/components/AgentDetailView.css | 5 +++++ .../__tests__/AgentDetailView.mobile-scroll.test.tsx | 8 ++++++-- 3 files changed, 18 insertions(+), 2 deletions(-) create mode 100644 .changeset/fn-7052-agent-detail-mobile-tab-touch-action.md diff --git a/.changeset/fn-7052-agent-detail-mobile-tab-touch-action.md b/.changeset/fn-7052-agent-detail-mobile-tab-touch-action.md new file mode 100644 index 0000000000..73f7066602 --- /dev/null +++ b/.changeset/fn-7052-agent-detail-mobile-tab-touch-action.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Restore horizontal swiping on Agent Detail tabs on mobile touch devices. +category: fix +dev: Adds `.agent-detail-tab` touch-action pan-x coverage because the global mobile pan-y lock is non-inherited. diff --git a/packages/dashboard/app/components/AgentDetailView.css b/packages/dashboard/app/components/AgentDetailView.css index f4c98aede4..7669fd4c4f 100644 --- a/packages/dashboard/app/components/AgentDetailView.css +++ b/packages/dashboard/app/components/AgentDetailView.css @@ -274,10 +274,14 @@ Tablet viewports inherit the base tab rule because AgentDetailView has only a mo FNXC:AgentDetailView 2026-06-21-11:03: Agent-detail tabs must be non-shrinking flex children so the overflow strip develops real horizontal scroll on narrow mobile viewports instead of squashing Dashboard / Logs / Mail / Skills / Settings into the available width (FN-6865). + +FNXC:AgentDetailView 2026-06-26-01:00: +`touch-action` is non-inherited, so the tab buttons themselves are the touch targets that must opt into pan-x; the FN-6450/FN-6865 container-only opt-in still left button touches under the global mobile `* { touch-action: pan-y; }` lock. Mirror the FN-7048 task-detail fix for FN-7052 without changing tab layout or labels. */ .agent-detail-tab { display: flex; flex: 0 0 auto; + touch-action: pan-x pan-y; align-items: center; gap: var(--space-xs); padding: calc(var(--space-sm) + var(--space-xs) * 0.5) var(--space-md); @@ -1834,6 +1838,7 @@ Agent-detail tabs must be non-shrinking flex children so the overflow strip deve .agent-detail-tab { padding: var(--space-md) calc(var(--space-md) + var(--space-xs) * 0.5); font-size: 0.875rem; + touch-action: pan-x pan-y; white-space: nowrap; min-height: calc(var(--space-lg) + var(--space-md) + var(--space-xs)); } 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 d8f4850788..450957ec08 100644 --- a/packages/dashboard/app/components/__tests__/AgentDetailView.mobile-scroll.test.tsx +++ b/packages/dashboard/app/components/__tests__/AgentDetailView.mobile-scroll.test.tsx @@ -66,6 +66,7 @@ describe("AgentDetailView mobile scroll regression (FN-4231)", () => { expect(tabsStyle.touchAction).toBe("pan-x pan-y"); expect(tabsStyle.touchAction).toContain("pan-x"); expect(tabsStyle.overflowX).toBe("auto"); + expect(tabStyle.touchAction).toContain("pan-x"); expect(tabStyle.flexShrink).toBe("0"); }); @@ -84,9 +85,12 @@ describe("AgentDetailView mobile scroll regression (FN-4231)", () => { const tabsEl = document.querySelector(".agent-detail-tabs") as HTMLElement; const tabEl = document.querySelector(".agent-detail-tab") as HTMLElement; + const tabStyle = window.getComputedStyle(tabEl); + expect(window.getComputedStyle(tabsEl).overflowX).toBe("auto"); - expect(window.getComputedStyle(tabEl).whiteSpace).toBe("nowrap"); - expect(window.getComputedStyle(tabEl).flexShrink).toBe("0"); + expect(tabStyle.touchAction).toContain("pan-x"); + expect(tabStyle.whiteSpace).toBe("nowrap"); + expect(tabStyle.flexShrink).toBe("0"); }); it("keeps tab labels readable across tablet and mobile states (FN-6728)", async () => {