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:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user