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(); + + 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"); + }); });