From aa0d8635faf69042fa6d73bf4d08042c6bae4cd4 Mon Sep 17 00:00:00 2001
From: gsxdsm <gsxdsm@users.noreply.github.com>
Date: Wed, 15 Jul 2026 14:10:28 -0700
Subject: [PATCH] FN-7972: fix agents controls panel overlapping content

Elevate the Agents controls popover stacking so it layers above agent cards and token usage on desktop and mobile.

- Add `.agents-view-primary-actions--controls-open` with z-index 50 when the controls panel is open
- Toggle the elevated class from AgentsView when the panel opens
- Extend AgentsView tests for open-state class and stacking CSS invariant
- Add patch changeset for the operator-facing fix

Files changed:
 .changeset/fn-7972-agents-controls-overlap.md           |  7 +++++++
 packages/dashboard/app/components/AgentsView.css        |  8 ++++++++
 packages/dashboard/app/components/AgentsView.tsx        |  2 +-
 .../app/components/__tests__/AgentsView.test.tsx        | 17 ++++++++++++-----
 4 files changed, 28 insertions(+), 6 deletions(-)

Fusion-Task-Id: FN-7972

Fusion-Task-Lineage: e6cca457-1cd1-4577-83a7-d7de7e484580

Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
---
 .changeset/fn-7972-agents-controls-overlap.md   |  7 +++++++
 .../dashboard/app/components/AgentsView.css     |  8 ++++++++
 .../dashboard/app/components/AgentsView.tsx     |  2 +-
 .../components/__tests__/AgentsView.test.tsx    | 17 ++++++++++++-----
 4 files changed, 28 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/fn-7972-agents-controls-overlap.md

diff --git a/.changeset/fn-7972-agents-controls-overlap.md b/.changeset/fn-7972-agents-controls-overlap.md
new file mode 100644
index 0000000000..066bdb81ce
--- /dev/null
+++ b/.changeset/fn-7972-agents-controls-overlap.md
@@ -0,0 +1,7 @@
+---
+"@runfusion/fusion": patch
+---
+
+summary: Fix Agents controls panel overlapping surrounding content on narrow viewports.
+category: fix
+dev: Elevated the .agent-controls-panel stacking context in AgentsView.css so the open controls popover sits above agent cards and token usage.
diff --git a/packages/dashboard/app/components/AgentsView.css b/packages/dashboard/app/components/AgentsView.css
index 597969d478..c7d306c698 100644
--- a/packages/dashboard/app/components/AgentsView.css
+++ b/packages/dashboard/app/components/AgentsView.css
@@ -101,6 +101,14 @@ The former scoped overrides (.agents-view .view-header padding/border/background
   gap: var(--space-sm);
 }
 
+/*
+ FNXC:AgentsControlsOverlay 2026-07-15-00:00:
+ FN-7972 requires the open controls panel to layer above agent cards and Token Usage on desktop and mobile. Elevate only its active anchor so unrelated dashboard overlays keep their existing stacking order.
+*/
+.agents-view-primary-actions--controls-open {
+  z-index: 50;
+}
+
 .agent-controls-trigger {
   white-space: nowrap;
 }
diff --git a/packages/dashboard/app/components/AgentsView.tsx b/packages/dashboard/app/components/AgentsView.tsx
index 7683d62bd1..7aa5e562d3 100644
--- a/packages/dashboard/app/components/AgentsView.tsx
+++ b/packages/dashboard/app/components/AgentsView.tsx
@@ -1401,7 +1401,7 @@ export function AgentsView({ addToast, projectId, onOpenTaskLogs, agentOnboardin
               <Network size={16} />
             </button>
           </div>
-          <div className="agents-view-primary-actions">
+          <div className={`agents-view-primary-actions${isControlsPanelOpen ? " agents-view-primary-actions--controls-open" : ""}`}>
             <button
               ref={controlsTriggerRef}
               className={`btn-icon agent-controls-trigger${isControlsPanelOpen ? " agent-controls-trigger--active" : ""}`}
diff --git a/packages/dashboard/app/components/__tests__/AgentsView.test.tsx b/packages/dashboard/app/components/__tests__/AgentsView.test.tsx
index 6b847e66e1..3f16516091 100644
--- a/packages/dashboard/app/components/__tests__/AgentsView.test.tsx
+++ b/packages/dashboard/app/components/__tests__/AgentsView.test.tsx
@@ -647,13 +647,15 @@ describe("AgentsView", () => {
       });
     });
 
-    it("keeps New Agent directly accessible on desktop while controls live in popup", async () => {
-      renderView(<AgentsView addToast={mockAddToast} />);
+    it("keeps New Agent directly accessible on desktop while controls live in an elevated popup", async () => {
+      const { container } = renderView(<AgentsView addToast={mockAddToast} />);
 
       expect(screen.getByRole("button", { name: "New Agent" })).toBeTruthy();
       expect(screen.queryByRole("dialog", { name: "Agent controls" })).toBeNull();
+      expect(container.querySelector(".agents-view-primary-actions--controls-open")).toBeNull();
 
       await openControlsPanel();
+      expect(container.querySelector(".agents-view-primary-actions--controls-open")).toBeTruthy();
       expect(screen.getByLabelText("Filter agents by state")).toBeTruthy();
       expect(screen.getByLabelText("Show system agents")).toBeTruthy();
       expect(screen.getAllByRole("button", { name: "Import" }).length).toBeGreaterThan(0);
@@ -661,14 +663,15 @@ describe("AgentsView", () => {
       expect(screen.getByLabelText("Heartbeat speed preset")).toBeTruthy();
     });
 
-    it("moves import and new-agent actions into the controls popup on mobile", async () => {
+    it("moves import and new-agent actions into an elevated controls popup on mobile", async () => {
       mockViewportMode.mockReturnValue("mobile");
-      renderView(<AgentsView addToast={mockAddToast} />);
+      const { container } = renderView(<AgentsView addToast={mockAddToast} />);
 
       expect(screen.queryByRole("button", { name: "Import" })).toBeNull();
       expect(screen.queryByRole("button", { name: "New Agent" })).toBeNull();
 
       await openControlsPanel();
+      expect(container.querySelector(".agents-view-primary-actions--controls-open")).toBeTruthy();
       expect(screen.getByRole("button", { name: "Import" })).toBeTruthy();
       expect(screen.getByRole("button", { name: "New Agent" })).toBeTruthy();
     });
@@ -1629,10 +1632,14 @@ describe("AgentsView", () => {
       expect(css).toContain("pointer-events: none");
     });
 
-    it("keeps a compact mobile Agents label visible, anchors the controls popup to the action row, and expands view toggles to 36px touch targets", () => {
+    it("keeps a compact mobile Agents label visible, elevates the open controls overlay above Agents content, and expands view toggles to 36px touch targets", () => {
       const css = loadAllAppCss();
+      const mobileCss = css.slice(css.indexOf("@media (max-width: 768px)"));
       expect(css).toContain(".agents-view-primary-actions {\n  position: relative;");
+      expect(css).toContain(".agents-view-primary-actions--controls-open {\n  z-index: 50;\n}");
       expect(css).toContain(".agent-controls-panel {\n  position: absolute;\n  top: calc(100% + var(--space-sm));\n  right: 0;");
+      expect(css).toContain("background: var(--card);");
+      expect(mobileCss).not.toMatch(/\.agents-view-primary-actions--controls-open\s*\{[^}]*z-index:\s*(?:auto|0)/);
       expect(css).toContain(".agents-view-title h2 {\n    display: block;\n    font-size: var(--space-lg);");
       expect(css).toContain(".agent-controls-mobile-actions {");
       expect(css).toContain(".agent-controls-mobile-actions .btn {");