From b84bd11256a1ace9e83c5b90f6fb5d1dd6c80d4c Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Sun, 12 Jul 2026 17:09:15 -0700 Subject: [PATCH] FN-7881: fix System-controls refresh button mobile layout Keeps the Command Center System tab's refresh button inline with the section title and pinned to the far right at all breakpoints, instead of dropping below the title on mobile. - Add a scoped .cc-area-section-header.cc-system-controls-header CSS override (row + space-between) that wins over the shared mobile column-collapse rule for the System tab only - Add data-testid="cc-system-refresh" to the refresh button for test targeting - Add regression tests asserting the header stays row-aligned in the DOM and the CSS override is present at the 768px breakpoint - Add a patch changeset documenting the fix Files changed: .changeset/fn-7881-system-refresh-inline.md | 7 +++++++ .../__tests__/SystemControlsArea.test.tsx | 23 ++++++++++++++++++++++ .../command-center/areas/SystemControlsArea.css | 22 +++++++++++++++++++++ .../command-center/areas/SystemControlsArea.tsx | 3 ++- 4 files changed, 54 insertions(+), 1 deletion(-) Fusion-Task-Id: FN-7881 Fusion-Task-Lineage: 80c6fd78-b7e0-4899-b509-b69b8d21e82d Co-authored-by: Fusion (runfusion.ai) --- .changeset/fn-7881-system-refresh-inline.md | 7 ++++++ .../__tests__/SystemControlsArea.test.tsx | 23 +++++++++++++++++++ .../areas/SystemControlsArea.css | 22 ++++++++++++++++++ .../areas/SystemControlsArea.tsx | 3 ++- 4 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 .changeset/fn-7881-system-refresh-inline.md diff --git a/.changeset/fn-7881-system-refresh-inline.md b/.changeset/fn-7881-system-refresh-inline.md new file mode 100644 index 0000000000..41724324d1 --- /dev/null +++ b/.changeset/fn-7881-system-refresh-inline.md @@ -0,0 +1,7 @@ +--- +"@runfusion/fusion": patch +--- + +summary: Keep the System tab refresh button inline with its title and far right on mobile. +category: fix +dev: Scopes a cc-system-controls-header row+space-between override so the shared .cc-area-section-header mobile column collapse no longer pushes the refresh button below the title. diff --git a/packages/dashboard/app/components/command-center/__tests__/SystemControlsArea.test.tsx b/packages/dashboard/app/components/command-center/__tests__/SystemControlsArea.test.tsx index 2e56a096e3..29b922de92 100644 --- a/packages/dashboard/app/components/command-center/__tests__/SystemControlsArea.test.tsx +++ b/packages/dashboard/app/components/command-center/__tests__/SystemControlsArea.test.tsx @@ -146,6 +146,29 @@ describe("SystemControlsArea layout integration", () => { await waitFor(() => expect(mockFetchSystemInfo).toHaveBeenCalled()); }); + it("keeps the System controls refresh button in the scoped inline header", async () => { + render(); + + fireEvent.click(screen.getByTestId("command-center-tab-system")); + + const controls = await screen.findByTestId("cc-system-controls"); + const header = controls.querySelector(".cc-system-controls-header"); + const title = screen.getByRole("heading", { name: "System controls" }); + const refresh = screen.getByTestId("cc-system-refresh"); + + expect(header).toBeInTheDocument(); + expect(header).toHaveClass("cc-area-section-header", "cc-system-controls-header"); + expect(title.parentElement).toBe(header); + expect(refresh.parentElement).toBe(header); + }); + + it("keeps the System controls header row override active on mobile", () => { + const css = readFileSync(join(process.cwd(), "app/components/command-center/areas/SystemControlsArea.css"), "utf8"); + + expect(css).toMatch(/\.cc-area-section-header\.cc-system-controls-header\s*{[^}]*flex-direction:\s*row;[^}]*justify-content:\s*space-between;/s); + expect(css).toMatch(/@media\s*\(max-width:\s*768px\)\s*{[\s\S]*\.cc-area-section-header\.cc-system-controls-header\s*{[^}]*flex-direction:\s*row;[^}]*justify-content:\s*space-between;/); + }); + it("keeps the System tab gap and mobile scroll-owner CSS contracts tokenized", () => { const css = readFileSync(join(process.cwd(), "app/components/command-center/CommandCenter.css"), "utf8"); diff --git a/packages/dashboard/app/components/command-center/areas/SystemControlsArea.css b/packages/dashboard/app/components/command-center/areas/SystemControlsArea.css index dcda183d6a..74d4096224 100644 --- a/packages/dashboard/app/components/command-center/areas/SystemControlsArea.css +++ b/packages/dashboard/app/components/command-center/areas/SystemControlsArea.css @@ -7,6 +7,28 @@ log tail use a terminal-style scroll box bounded in height so streaming output never grows the page; the page must not scroll horizontally (pre wraps). */ +/* +FNXC:SystemPanel 2026-07-12-17:10: +The System-controls refresh button must stay inline with the "System controls" +title and pinned to the far right on every breakpoint. The shared +.cc-area-section-header collapses to a left-aligned column at <=768px (correct +for analytics areas), so scope a row+space-between override to the System tab +only, using a two-class selector so it wins over the shared mobile rule. +*/ +.cc-area-section-header.cc-system-controls-header { + flex-direction: row; + align-items: center; + justify-content: space-between; +} + +@media (max-width: 768px) { + .cc-area-section-header.cc-system-controls-header { + flex-direction: row; + align-items: center; + justify-content: space-between; + } +} + .cc-syscontrols-grid { min-inline-size: 0; display: grid; diff --git a/packages/dashboard/app/components/command-center/areas/SystemControlsArea.tsx b/packages/dashboard/app/components/command-center/areas/SystemControlsArea.tsx index f99e738238..7c05283d40 100644 --- a/packages/dashboard/app/components/command-center/areas/SystemControlsArea.tsx +++ b/packages/dashboard/app/components/command-center/areas/SystemControlsArea.tsx @@ -572,11 +572,12 @@ export function SystemControlsArea({ projectId, addToast }: SystemControlsAreaPr return ( <>
-
+

{t("systemControls.title", "System controls")}